From ab7f8b526b4e898d35fdb2ab56e76d08f04f262f Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Wed, 15 Jul 2020 11:05:37 -0700 Subject: [PATCH] chore: remove react packages, tslint packages, and unneeded react references --- .github/CODEOWNERS | 15 - .github/workflows/ci-daily.yml | 9 - .github/workflows/testing/ci-daily-local.yml | 9 - build/copy-readme.js | 30 - build/documentation/copy-package-readme.js | 168 -- build/documentation/generate-typedocs.js | 193 -- docs/en/contributing/install.md | 51 - docs/en/contributing/packages.md | 138 -- docs/en/contributing/policies.md | 11 - docs/en/contributing/standards.md | 40 - docs/en/contributing/status.md | 29 - docs/en/contributing/testing.md | 139 -- docs/en/contributing/working.md | 95 - docs/en/contributing/writing-style-guide.md | 204 -- docs/en/getting-started/design-system.md | 31 - docs/en/getting-started/jss.md | 20 - .../getting-started/modifying-components.md | 67 - docs/en/getting-started/the-basics.md | 68 - docs/en/getting-started/utilities.md | 10 - docs/readme.md | 36 - package.json | 5 - packages/README.md | 3 +- .../.eslintignore | 6 - .../.eslintrc.js | 3 - .../.npmignore | 5 - .../.npmrc | 1 - .../.prettierignore | 3 - .../CHANGELOG.md | 499 ----- .../README.md | 27 - .../package.json | 37 - .../src/auto-suggest/index.ts | 24 - .../src/badge/index.ts | 6 - .../src/breadcrumb/index.ts | 10 - .../src/button/index.ts | 14 - .../src/card/index.ts | 6 - .../src/checkbox/index.ts | 39 - .../src/context-menu-item/index.ts | 9 - .../src/context-menu/index.ts | 6 - .../src/data-grid/index.ts | 64 - .../src/dialog/index.ts | 24 - .../src/divider/index.ts | 9 - .../src/horizontal-overflow/index.ts | 29 - .../src/hypertext/index.ts | 9 - .../src/image/index.ts | 19 - .../src/index.ts | 33 - .../src/label/index.ts | 14 - .../src/listbox-item/index.ts | 19 - .../src/listbox/index.ts | 14 - .../src/managed-classes.ts | 14 - .../src/number-field/index.ts | 9 - .../src/progress/index.ts | 9 - .../src/radio/index.ts | 11 - .../src/select/index.ts | 69 - .../src/slider-track-item/index.ts | 19 - .../src/slider/index.ts | 98 - .../src/stack-panel/index.ts | 19 - .../src/tabs/index.ts | 55 - .../src/text-area/index.ts | 9 - .../src/text-field/index.ts | 9 - .../src/toggle/index.ts | 44 - .../src/tree-view-item/index.ts | 49 - .../src/tree-view/index.ts | 9 - .../src/typography/index.ts | 54 - .../src/viewport-positioner/index.ts | 39 - .../tsconfig.build.json | 9 - .../tsconfig.json | 7 - .../.eslintignore | 6 - .../.eslintrc.js | 3 - .../.npmignore | 5 - .../.npmrc | 1 - .../.prettierignore | 3 - .../CHANGELOG.md | 591 ------ .../README.md | 3 - .../package.json | 40 - .../src/action-toggle/index.ts | 64 - .../src/action-trigger/index.ts | 48 - .../src/auto-suggest-option/index.ts | 27 - .../src/auto-suggest/index.ts | 11 - .../src/badge/index.ts | 21 - .../src/button-base/index.ts | 26 - .../src/button/index.ts | 46 - .../src/call-to-action/index.ts | 44 - .../src/caption/index.ts | 19 - .../src/carousel/index.ts | 80 - .../src/context-menu-item/index.ts | 12 - .../src/data-grid/index.ts | 7 - .../src/flipper/index.ts | 24 - .../src/flyout/index.ts | 39 - .../src/heading/index.ts | 44 - .../src/index.ts | 28 - .../src/managed-classes.ts | 1 - .../src/metatext/index.ts | 9 - .../src/paragraph/index.ts | 24 - .../src/pivot/index.ts | 64 - .../src/progress/index.ts | 81 - .../src/select-option/index.ts | 31 - .../src/select/index.ts | 26 - .../src/slider-label/index.ts | 54 - .../src/slider/index.ts | 7 - .../src/subheading/index.ts | 44 - .../src/text-action/index.ts | 44 - .../src/text-field/index.ts | 16 - .../src/tree-view-item/index.ts | 16 - .../tsconfig.build.json | 9 - .../tsconfig.json | 7 - .../.eslintignore | 6 - .../.eslintrc.js | 3 - .../.npmignore | 10 - .../fast-components-foundation-react/.npmrc | 1 - .../.prettierignore | 3 - .../CHANGELOG.md | 208 -- .../README.md | 180 -- .../babel.config.js | 12 - .../package.json | 100 - .../src/foundation/foundation.props.ts | 6 - .../src/foundation/foundation.spec.tsx | 528 ----- .../src/foundation/foundation.ts | 193 -- .../src/foundation/index.ts | 4 - .../src/index.ts | 3 - .../tsconfig.build.json | 11 - .../tsconfig.json | 7 - .../fast-components-react-base/.eslintignore | 8 - .../fast-components-react-base/.eslintrc.js | 6 - .../fast-components-react-base/.npmignore | 15 - .../react/fast-components-react-base/.npmrc | 1 - .../.prettierignore | 4 - .../.storybook/config.js | 11 - .../.storybook/presets.js | 22 - .../fast-components-react-base/CHANGELOG.md | 1543 -------------- .../fast-components-react-base/README.md | 61 - .../babel.config.js | 12 - .../fast-components-react-base/package.json | 132 -- .../src/auto-suggest/README.md | 16 - .../src/auto-suggest/auto-suggest-context.tsx | 15 - .../src/auto-suggest/auto-suggest.props.ts | 79 - .../src/auto-suggest/auto-suggest.schema.2.ts | 48 - .../src/auto-suggest/auto-suggest.schema.ts | 49 - .../src/auto-suggest/auto-suggest.spec.tsx | 605 ------ .../src/auto-suggest/auto-suggest.stories.tsx | 152 -- .../src/auto-suggest/auto-suggest.tsx | 630 ------ .../src/auto-suggest/index.ts | 7 - .../src/badge/README.md | 7 - .../src/badge/badge.props.ts | 16 - .../src/badge/badge.schema.2.ts | 19 - .../src/badge/badge.schema.json | 19 - .../src/badge/badge.schema.ts | 20 - .../src/badge/badge.spec.tsx | 38 - .../src/badge/badge.stories.tsx | 5 - .../src/badge/badge.tsx | 40 - .../src/badge/index.ts | 7 - .../src/breadcrumb/README.md | 8 - .../src/breadcrumb/breadcrumb.props.ts | 26 - .../src/breadcrumb/breadcrumb.schema.2.ts | 29 - .../src/breadcrumb/breadcrumb.schema.ts | 33 - .../src/breadcrumb/breadcrumb.spec.tsx | 135 -- .../src/breadcrumb/breadcrumb.stories.tsx | 23 - .../src/breadcrumb/breadcrumb.tsx | 128 -- .../src/breadcrumb/index.ts | 7 - .../src/button/README.md | 5 - .../src/button/button.props.ts | 26 - .../src/button/button.schema.2.ts | 27 - .../src/button/button.schema.ts | 29 - .../src/button/button.spec.tsx | 161 -- .../src/button/button.stories.tsx | 7 - .../src/button/button.tsx | 81 - .../src/button/index.ts | 7 - .../src/card/README.md | 2 - .../src/card/card.props.ts | 30 - .../src/card/card.schema.2.ts | 25 - .../src/card/card.schema.ts | 27 - .../src/card/card.spec.tsx | 65 - .../src/card/card.stories.tsx | 10 - .../src/card/card.tsx | 48 - .../src/card/index.ts | 7 - .../src/checkbox/DOCS.md | 8 - .../src/checkbox/README.md | 5 - .../src/checkbox/checkbox.props.ts | 69 - .../src/checkbox/checkbox.schema.2.ts | 51 - .../src/checkbox/checkbox.schema.ts | 52 - .../src/checkbox/checkbox.spec.tsx | 280 --- .../src/checkbox/checkbox.stories.tsx | 68 - .../src/checkbox/checkbox.tsx | 209 -- .../src/checkbox/index.ts | 7 - .../src/context-menu-item/README.md | 2 - .../context-menu-item.props.ts | 42 - .../context-menu-item.schema.2.ts | 31 - .../context-menu-item.schema.ts | 33 - .../context-menu-item.spec.tsx | 260 --- .../context-menu-item.stories.tsx | 9 - .../context-menu-item/context-menu-item.tsx | 136 -- .../src/context-menu-item/index.ts | 7 - .../src/context-menu/README.md | 8 - .../src/context-menu/context-menu.props.ts | 21 - .../src/context-menu/context-menu.schema.2.ts | 23 - .../src/context-menu/context-menu.schema.ts | 23 - .../src/context-menu/context-menu.spec.tsx | 253 --- .../src/context-menu/context-menu.stories.tsx | 29 - .../src/context-menu/context-menu.tsx | 256 --- .../src/context-menu/index.ts | 7 - .../src/data-grid/README.md | 65 - .../src/data-grid/data-grid-cell.props.ts | 28 - .../src/data-grid/data-grid-cell.schema.ts | 40 - .../src/data-grid/data-grid-cell.spec.tsx | 227 --- .../src/data-grid/data-grid-cell.tsx | 159 -- .../src/data-grid/data-grid-context.tsx | 35 - .../src/data-grid/data-grid-row.props.ts | 29 - .../src/data-grid/data-grid-row.schema.ts | 26 - .../src/data-grid/data-grid-row.spec.tsx | 117 -- .../src/data-grid/data-grid-row.tsx | 119 -- .../src/data-grid/data-grid.props.ts | 130 -- .../src/data-grid/data-grid.schema.ts | 54 - .../src/data-grid/data-grid.spec.tsx | 726 ------- .../src/data-grid/data-grid.stories.tsx | 324 --- .../src/data-grid/data-grid.tsx | 1397 ------------- .../src/data-grid/index.ts | 10 - .../src/dialog/README.md | 9 - .../src/dialog/dialog.props.ts | 69 - .../src/dialog/dialog.schema.2.ts | 52 - .../src/dialog/dialog.schema.ts | 54 - .../src/dialog/dialog.spec.tsx | 368 ---- .../src/dialog/dialog.stories.tsx | 71 - .../src/dialog/dialog.tsx | 309 --- .../src/dialog/index.ts | 7 - .../src/divider/README.md | 5 - .../src/divider/divider.props.ts | 24 - .../src/divider/divider.schema.ts | 15 - .../src/divider/divider.spec.tsx | 65 - .../src/divider/divider.stories.tsx | 11 - .../src/divider/divider.tsx | 58 - .../src/divider/docs.md | 8 - .../src/divider/index.ts | 6 - .../src/horizontal-overflow/README.md | 20 - .../horizontal-overflow.node.spec.tsx | 67 - .../horizontal-overflow.props.ts | 79 - .../horizontal-overflow.schema.2.ts | 28 - .../horizontal-overflow.schema.ts | 30 - .../horizontal-overflow.spec.tsx | 876 -------- .../horizontal-overflow.stories.tsx | 128 -- .../horizontal-overflow.tsx | 851 -------- .../src/horizontal-overflow/index.ts | 7 - .../src/hypertext/README.md | 5 - .../src/hypertext/hypertext.props.ts | 16 - .../src/hypertext/hypertext.schema.2.ts | 23 - .../src/hypertext/hypertext.schema.ts | 25 - .../src/hypertext/hypertext.spec.tsx | 80 - .../src/hypertext/hypertext.stories.tsx | 7 - .../src/hypertext/hypertext.tsx | 43 - .../src/hypertext/index.ts | 7 - .../src/image/README.md | 5 - .../src/image/image.props.ts | 42 - .../src/image/image.schema.ts | 29 - .../src/image/image.spec.tsx | 169 -- .../src/image/image.stories.tsx | 52 - .../src/image/image.tsx | 71 - .../src/image/index.ts | 6 - .../src/index.spec.ts | 12 - .../fast-components-react-base/src/index.ts | 134 -- .../src/label/README.md | 5 - .../src/label/index.ts | 7 - .../src/label/label.props.ts | 33 - .../src/label/label.schema.2.ts | 29 - .../src/label/label.schema.ts | 31 - .../src/label/label.spec.tsx | 167 -- .../src/label/label.stories.tsx | 21 - .../src/label/label.tsx | 69 - .../src/listbox-item/README.md | 8 - .../src/listbox-item/index.ts | 7 - .../src/listbox-item/listbox-item.props.ts | 45 - .../src/listbox-item/listbox-item.schema.2.ts | 36 - .../src/listbox-item/listbox-item.schema.ts | 38 - .../src/listbox-item/listbox-item.spec.tsx | 230 --- .../src/listbox-item/listbox-item.stories.tsx | 10 - .../src/listbox-item/listbox-item.tsx | 173 -- .../src/listbox/README.md | 21 - .../src/listbox/index.ts | 7 - .../src/listbox/listbox-context.tsx | 22 - .../src/listbox/listbox.props.ts | 73 - .../src/listbox/listbox.schema.2.ts | 47 - .../src/listbox/listbox.schema.ts | 49 - .../src/listbox/listbox.spec.tsx | 819 -------- .../src/listbox/listbox.stories.tsx | 71 - .../src/listbox/listbox.tsx | 729 ------- .../src/number-field/README.md | 9 - .../src/number-field/index.ts | 6 - .../src/number-field/number-field.props.ts | 15 - .../src/number-field/number-field.schema.ts | 46 - .../src/number-field/number-field.spec.tsx | 56 - .../src/number-field/number-field.stories.tsx | 17 - .../src/number-field/number-field.tsx | 53 - .../src/progress/README.md | 5 - .../src/progress/index.ts | 7 - .../src/progress/progress.props.ts | 31 - .../src/progress/progress.schema.2.ts | 31 - .../src/progress/progress.schema.ts | 32 - .../src/progress/progress.spec.tsx | 167 -- .../src/progress/progress.stories.tsx | 17 - .../src/progress/progress.tsx | 71 - .../src/radio/README.md | 5 - .../src/radio/index.ts | 7 - .../src/radio/radio.props.ts | 59 - .../src/radio/radio.schema.2.ts | 50 - .../src/radio/radio.schema.ts | 51 - .../src/radio/radio.spec.tsx | 277 --- .../src/radio/radio.stories.tsx | 64 - .../src/radio/radio.tsx | 146 -- .../src/select/README.md | 22 - .../src/select/index.ts | 7 - .../src/select/select.props.ts | 127 -- .../src/select/select.schema.2.ts | 124 -- .../src/select/select.schema.ts | 125 -- .../src/select/select.spec.tsx | 649 ------ .../src/select/select.stories.tsx | 116 -- .../src/select/select.tsx | 709 ------- .../src/slider-track-item/README.md | 24 - .../src/slider-track-item/index.ts | 7 - .../slider-track-item.props.ts | 39 - .../slider-track-item.schema.2.ts | 44 - .../slider-track-item.schema.ts | 46 - .../slider-track-item.spec.tsx | 211 -- .../slider-track-item.stories.tsx | 5 - .../slider-track-item/slider-track-item.tsx | 164 -- .../src/slider/README.md | 41 - .../src/slider/index.ts | 7 - .../src/slider/slider-context.tsx | 22 - .../src/slider/slider.props.ts | 153 -- .../src/slider/slider.schema.2.ts | 113 -- .../src/slider/slider.schema.ts | 115 -- .../src/slider/slider.spec.tsx | 1213 ----------- .../src/slider/slider.stories.tsx | 8 - .../src/slider/slider.tsx | 1345 ------------- .../src/stack-panel/README.md | 37 - .../src/stack-panel/index.ts | 6 - .../src/stack-panel/stack-panel.props.ts | 70 - .../src/stack-panel/stack-panel.schema.ts | 65 - .../src/stack-panel/stack-panel.spec.tsx | 259 --- .../src/stack-panel/stack-panel.stories.tsx | 335 ---- .../src/stack-panel/stack-panel.tsx | 557 ------ .../src/tabs/README.md | 8 - .../src/tabs/index.ts | 28 - .../src/tabs/tab-item.props.ts | 23 - .../src/tabs/tab-item.schema.2.ts | 30 - .../src/tabs/tab-item.schema.ts | 31 - .../src/tabs/tab-item.tsx | 10 - .../src/tabs/tab-panel.props.ts | 28 - .../src/tabs/tab-panel.schema.2.ts | 25 - .../src/tabs/tab-panel.schema.ts | 27 - .../src/tabs/tab-panel.spec.tsx | 86 - .../src/tabs/tab-panel.tsx | 57 - .../src/tabs/tab.props.ts | 28 - .../src/tabs/tab.schema.2.ts | 25 - .../src/tabs/tab.schema.ts | 27 - .../src/tabs/tab.spec.tsx | 86 - .../src/tabs/tab.tsx | 51 - .../src/tabs/tabs.props.ts | 70 - .../src/tabs/tabs.schema.2.ts | 49 - .../src/tabs/tabs.schema.ts | 50 - .../src/tabs/tabs.spec.tsx | 844 -------- .../src/tabs/tabs.stories.tsx | 90 - .../src/tabs/tabs.tsx | 473 ----- .../src/text-area/README.md | 2 - .../src/text-area/index.ts | 6 - .../src/text-area/text-area.props.ts | 12 - .../src/text-area/text-area.schema.ts | 18 - .../src/text-area/text-area.spec.tsx | 87 - .../src/text-area/text-area.stories.tsx | 9 - .../src/text-area/text-area.tsx | 42 - .../src/text-field/README.md | 5 - .../src/text-field/index.ts | 6 - .../src/text-field/text-field.props.ts | 29 - .../src/text-field/text-field.schema.ts | 23 - .../src/text-field/text-field.spec.tsx | 146 -- .../src/text-field/text-field.stories.tsx | 21 - .../src/text-field/text-field.tsx | 47 - .../src/toggle/README.md | 5 - .../src/toggle/index.ts | 7 - .../src/toggle/toggle.props.ts | 61 - .../src/toggle/toggle.schema.2.ts | 53 - .../src/toggle/toggle.schema.ts | 55 - .../src/toggle/toggle.spec.tsx | 162 -- .../src/toggle/toggle.stories.tsx | 50 - .../src/toggle/toggle.tsx | 178 -- .../src/tree-view-item/README.md | 5 - .../src/tree-view-item/index.ts | 7 - .../tree-view-item/tree-view-item.props.ts | 58 - .../tree-view-item/tree-view-item.schema.2.ts | 45 - .../tree-view-item/tree-view-item.schema.ts | 45 - .../tree-view-item/tree-view-item.spec.tsx | 564 ------ .../tree-view-item/tree-view-item.stories.tsx | 7 - .../src/tree-view-item/tree-view-item.tsx | 491 ----- .../src/tree-view/README.md | 5 - .../src/tree-view/index.ts | 7 - .../src/tree-view/tree-view.props.ts | 16 - .../src/tree-view/tree-view.schema.2.ts | 20 - .../src/tree-view/tree-view.schema.ts | 19 - .../src/tree-view/tree-view.spec.tsx | 148 -- .../src/tree-view/tree-view.stories.tsx | 36 - .../src/tree-view/tree-view.tsx | 274 --- .../src/typography/README.md | 2 - .../src/typography/index.ts | 7 - .../src/typography/typography.props.ts | 53 - .../src/typography/typography.schema.2.ts | 40 - .../src/typography/typography.schema.ts | 42 - .../src/typography/typography.spec.tsx | 237 --- .../src/typography/typography.stories.tsx | 51 - .../src/typography/typography.tsx | 80 - .../src/utilities/index.ts | 21 - .../utilities/intersection-observer-entry.ts | 10 - .../src/utilities/intersection-observer.ts | 31 - .../src/utilities/resize-observer-entry.ts | 14 - .../src/utilities/resize-observer.ts | 17 - .../src/viewport-positioner/README.md | 53 - .../src/viewport-positioner/index.ts | 7 - .../viewport-positioner/viewport-context.tsx | 9 - .../viewport-positioner.props.ts | 122 -- .../viewport-positioner.schema.2.ts | 70 - .../viewport-positioner.schema.ts | 72 - .../viewport-positioner.spec.tsx | 1458 -------------- .../viewport-positioner.stories.tsx | 498 ----- .../viewport-positioner.tsx | 1307 ------------ .../tsconfig.build.json | 12 - .../fast-components-react-base/tsconfig.json | 7 - .../fast-components-react-msft/.eslintignore | 8 - .../fast-components-react-msft/.eslintrc.js | 9 - .../fast-components-react-msft/.npmignore | 17 - .../react/fast-components-react-msft/.npmrc | 1 - .../.prettierignore | 4 - .../.storybook/config.js | 11 - .../.storybook/presets.js | 17 - .../fast-components-react-msft/CHANGELOG.md | 1660 ---------------- .../fast-components-react-msft/README.md | 36 - .../assets/carousel-hero-content.tsx | 132 -- .../assets/svg-element.tsx | 60 - .../babel.config.js | 12 - .../react/fast-components-react-msft/mock.js | 6 - .../fast-components-react-msft/package.json | 136 -- .../src/accent-button/README.md | 5 - .../accent-button/accent-button.schema.2.ts | 43 - .../src/accent-button/accent-button.schema.ts | 45 - .../accent-button/accent-button.stories.tsx | 51 - .../src/accent-button/index.ts | 46 - .../src/action-toggle/README.md | 11 - .../src/action-toggle/action-toggle.props.ts | 77 - .../action-toggle/action-toggle.schema.2.ts | 64 - .../src/action-toggle/action-toggle.schema.ts | 64 - .../src/action-toggle/action-toggle.spec.tsx | 352 ---- .../action-toggle/action-toggle.stories.tsx | 126 -- .../src/action-toggle/action-toggle.tsx | 163 -- .../src/action-toggle/index.ts | 41 - .../src/action-trigger/README.md | 13 - .../action-trigger/action-trigger.props.ts | 47 - .../action-trigger/action-trigger.schema.2.ts | 47 - .../action-trigger/action-trigger.schema.ts | 48 - .../action-trigger/action-trigger.spec.tsx | 241 --- .../action-trigger/action-trigger.stories.tsx | 127 -- .../src/action-trigger/action-trigger.tsx | 94 - .../src/action-trigger/index.ts | 44 - .../src/auto-suggest-option/README.md | 9 - .../auto-suggest-option.props.ts | 31 - .../auto-suggest-option.schema.2.ts | 34 - .../auto-suggest-option.schema.ts | 36 - .../auto-suggest-option.spec.tsx | 81 - .../auto-suggest-option.stories.tsx | 10 - .../auto-suggest-option.tsx | 114 -- .../src/auto-suggest-option/index.ts | 38 - .../src/auto-suggest/README.md | 19 - .../src/auto-suggest/auto-suggest.props.ts | 18 - .../src/auto-suggest/auto-suggest.schema.2.ts | 52 - .../src/auto-suggest/auto-suggest.schema.ts | 53 - .../src/auto-suggest/auto-suggest.spec.tsx | 98 - .../src/auto-suggest/auto-suggest.stories.tsx | 107 - .../src/auto-suggest/auto-suggest.tsx | 107 - .../src/auto-suggest/index.ts | 39 - .../src/background/README.md | 48 - .../src/background/background.props.ts | 74 - .../src/background/background.spec.tsx | 135 -- .../src/background/background.tsx | 88 - .../src/background/index.ts | 3 - .../src/badge/README.md | 1 - .../src/badge/badge.props.ts | 26 - .../src/badge/badge.schema.2.ts | 31 - .../src/badge/badge.schema.ts | 33 - .../src/badge/badge.spec.tsx | 86 - .../src/badge/badge.stories.tsx | 9 - .../src/badge/badge.tsx | 65 - .../src/badge/index.ts | 34 - .../src/breadcrumb/README.md | 17 - .../src/breadcrumb/breadcrumb.schema.2.ts | 30 - .../src/breadcrumb/breadcrumb.schema.ts | 32 - .../src/breadcrumb/breadcrumb.stories.tsx | 15 - .../src/breadcrumb/index.ts | 36 - .../src/button-base/button-base.props.ts | 28 - .../src/button-base/button-base.schema.2.ts | 43 - .../src/button-base/button-base.schema.ts | 45 - .../src/button-base/button-base.spec.tsx | 213 -- .../src/button-base/button-base.tsx | 90 - .../src/button-base/index.ts | 20 - .../src/button/README.md | 5 - .../src/button/button.props.ts | 41 - .../src/button/button.schema.2.ts | 46 - .../src/button/button.schema.ts | 48 - .../src/button/button.spec.tsx | 181 -- .../src/button/button.stories.tsx | 112 -- .../src/button/button.tsx | 94 - .../src/button/index.ts | 40 - .../src/call-to-action/README.md | 5 - .../call-to-action/call-to-action.props.ts | 32 - .../call-to-action/call-to-action.schema.2.ts | 35 - .../call-to-action/call-to-action.schema.ts | 37 - .../call-to-action/call-to-action.spec.tsx | 161 -- .../call-to-action/call-to-action.stories.tsx | 60 - .../src/call-to-action/call-to-action.tsx | 90 - .../src/call-to-action/index.ts | 41 - .../src/caption/README.md | 1 - .../src/caption/caption.props.ts | 40 - .../src/caption/caption.schema.2.ts | 33 - .../src/caption/caption.schema.ts | 35 - .../src/caption/caption.spec.tsx | 98 - .../src/caption/caption.stories.tsx | 18 - .../src/caption/caption.tsx | 63 - .../src/caption/index.ts | 40 - .../src/card/README.md | 5 - .../src/card/card.schema.2.ts | 25 - .../src/card/card.schema.ts | 27 - .../src/card/card.stories.tsx | 20 - .../src/card/index.ts | 31 - .../src/carousel/README.md | 9 - .../src/carousel/carousel.props.ts | 96 - .../src/carousel/carousel.schema.2.ts | 66 - .../src/carousel/carousel.schema.ts | 66 - .../src/carousel/carousel.spec.tsx | 501 ----- .../src/carousel/carousel.stories.tsx | 160 -- .../src/carousel/carousel.tsx | 457 ----- .../src/carousel/index.ts | 42 - .../src/checkbox/README.md | 5 - .../src/checkbox/checkbox.schema.2.ts | 46 - .../src/checkbox/checkbox.schema.ts | 47 - .../src/checkbox/checkbox.stories.tsx | 83 - .../src/checkbox/index.ts | 40 - .../src/context-menu-item/README.md | 5 - .../context-menu-item.props.ts | 31 - .../context-menu-item.schema.2.ts | 31 - .../context-menu-item.schema.ts | 33 - .../context-menu-item.spec.tsx | 59 - .../context-menu-item.stories.tsx | 28 - .../context-menu-item/context-menu-item.tsx | 45 - .../src/context-menu-item/index.ts | 40 - .../src/context-menu/README.md | 11 - .../src/context-menu/context-menu.props.ts | 18 - .../src/context-menu/context-menu.schema.2.ts | 23 - .../src/context-menu/context-menu.schema.ts | 23 - .../src/context-menu/context-menu.spec.tsx | 24 - .../src/context-menu/context-menu.stories.tsx | 39 - .../src/context-menu/context-menu.tsx | 49 - .../src/context-menu/index.ts | 35 - .../src/data-grid/README.md | 65 - .../src/data-grid/data-grid-cell.schema.ts | 40 - .../src/data-grid/data-grid-row.schema.ts | 26 - .../src/data-grid/data-grid.schema.ts | 54 - .../src/data-grid/data-grid.stories.tsx | 318 --- .../src/data-grid/index.ts | 43 - .../src/dialog/README.md | 13 - .../src/dialog/dialog.schema.2.ts | 52 - .../src/dialog/dialog.schema.ts | 54 - .../src/dialog/dialog.stories.tsx | 62 - .../src/dialog/index.ts | 37 - .../src/divider/README.md | 7 - .../src/divider/divider.schema.ts | 15 - .../src/divider/divider.stories.tsx | 21 - .../src/divider/index.ts | 37 - .../src/flipper/README.md | 5 - .../src/flipper/flipper.props.ts | 38 - .../src/flipper/flipper.schema.2.ts | 34 - .../src/flipper/flipper.schema.ts | 36 - .../src/flipper/flipper.spec.tsx | 88 - .../src/flipper/flipper.stories.tsx | 14 - .../src/flipper/flipper.tsx | 107 - .../src/flipper/index.ts | 39 - .../src/flyout/README.md | 9 - .../src/flyout/flyout.props.ts | 119 -- .../src/flyout/flyout.schema.2.ts | 76 - .../src/flyout/flyout.schema.ts | 78 - .../src/flyout/flyout.spec.tsx | 286 --- .../src/flyout/flyout.stories.tsx | 245 --- .../src/flyout/flyout.tsx | 222 --- .../src/flyout/index.ts | 43 - .../src/heading/README.md | 5 - .../src/heading/heading.props.ts | 53 - .../src/heading/heading.schema.2.ts | 31 - .../src/heading/heading.schema.ts | 33 - .../src/heading/heading.spec.tsx | 114 -- .../src/heading/heading.stories.tsx | 41 - .../src/heading/heading.tsx | 74 - .../src/heading/index.ts | 43 - .../src/hypertext/README.md | 5 - .../src/hypertext/hypertext.schema.2.ts | 26 - .../src/hypertext/hypertext.schema.ts | 28 - .../src/hypertext/hypertext.stories.tsx | 7 - .../src/hypertext/index.ts | 40 - .../src/image/README.md | 11 - .../src/image/image.schema.ts | 29 - .../src/image/image.stories.tsx | 56 - .../src/image/index.ts | 34 - .../src/index.spec.ts | 12 - .../fast-components-react-msft/src/index.ts | 47 - .../src/label/README.md | 9 - .../src/label/index.ts | 36 - .../src/label/label.schema.2.ts | 31 - .../src/label/label.schema.ts | 33 - .../src/label/label.stories.tsx | 9 - .../src/lightweight-button/README.md | 5 - .../src/lightweight-button/index.ts | 49 - .../lightweight-button.schema.2.ts | 49 - .../lightweight-button.schema.ts | 48 - .../lightweight-button.stories.tsx | 51 - .../src/metatext/README.md | 5 - .../src/metatext/index.ts | 39 - .../src/metatext/metatext.props.ts | 28 - .../src/metatext/metatext.schema.2.ts | 27 - .../src/metatext/metatext.schema.ts | 28 - .../src/metatext/metatext.spec.tsx | 73 - .../src/metatext/metatext.stories.tsx | 10 - .../src/metatext/metatext.tsx | 54 - .../src/neutral-button/README.md | 5 - .../src/neutral-button/index.ts | 49 - .../neutral-button/neutral-button.schema.2.ts | 45 - .../neutral-button/neutral-button.schema.ts | 46 - .../neutral-button/neutral-button.stories.tsx | 51 - .../src/number-field/README.md | 5 - .../src/number-field/index.ts | 37 - .../src/number-field/number-field.schema.ts | 46 - .../src/number-field/number-field.stories.tsx | 14 - .../src/outline-button/README.md | 5 - .../src/outline-button/index.ts | 49 - .../outline-button/outline-button.schema.2.ts | 44 - .../outline-button/outline-button.schema.ts | 46 - .../outline-button/outline-button.stories.tsx | 51 - .../src/paragraph/README.md | 5 - .../src/paragraph/index.ts | 42 - .../src/paragraph/paragraph.props.ts | 27 - .../src/paragraph/paragraph.schema.2.ts | 29 - .../src/paragraph/paragraph.schema.ts | 30 - .../src/paragraph/paragraph.spec.tsx | 68 - .../src/paragraph/paragraph.stories.tsx | 9 - .../src/paragraph/paragraph.tsx | 74 - .../src/pivot/README.md | 9 - .../src/pivot/index.ts | 28 - .../src/pivot/pivot.props.ts | 24 - .../src/pivot/pivot.schema.2.ts | 58 - .../src/pivot/pivot.schema.ts | 58 - .../src/pivot/pivot.spec.tsx | 217 -- .../src/pivot/pivot.stories.tsx | 48 - .../src/pivot/pivot.tsx | 240 --- .../src/progress/README.md | 13 - .../src/progress/index.ts | 38 - .../src/progress/progress.props.ts | 39 - .../src/progress/progress.schema.2.ts | 48 - .../src/progress/progress.schema.ts | 48 - .../src/progress/progress.spec.tsx | 120 -- .../src/progress/progress.stories.tsx | 24 - .../src/progress/progress.tsx | 188 -- .../src/radio/README.md | 1 - .../src/radio/index.ts | 35 - .../src/radio/radio.schema.2.ts | 46 - .../src/radio/radio.schema.ts | 46 - .../src/radio/radio.stories.tsx | 41 - .../src/select-option/README.md | 9 - .../src/select-option/index.ts | 35 - .../src/select-option/select-option.props.ts | 23 - .../select-option/select-option.schema.2.ts | 44 - .../src/select-option/select-option.schema.ts | 44 - .../src/select-option/select-option.spec.tsx | 61 - .../select-option/select-option.stories.tsx | 27 - .../src/select-option/select-option.tsx | 71 - .../src/select/README.md | 23 - .../src/select/index.ts | 36 - .../src/select/select.props.ts | 18 - .../src/select/select.schema.2.ts | 127 -- .../src/select/select.schema.ts | 126 -- .../src/select/select.spec.tsx | 82 - .../src/select/select.stories.tsx | 362 ---- .../src/select/select.tsx | 123 -- .../src/slider-label/README.md | 23 - .../src/slider-label/index.ts | 35 - .../src/slider-label/slider-label.props.ts | 42 - .../src/slider-label/slider-label.schema.2.ts | 47 - .../src/slider-label/slider-label.schema.ts | 49 - .../src/slider-label/slider-label.spec.tsx | 35 - .../src/slider-label/slider-label.stories.tsx | 25 - .../src/slider-label/slider-label.tsx | 109 - .../src/slider/README.md | 13 - .../src/slider/index.ts | 36 - .../src/slider/slider.props.ts | 18 - .../src/slider/slider.schema.2.ts | 113 -- .../src/slider/slider.schema.ts | 115 -- .../src/slider/slider.spec.tsx | 35 - .../src/slider/slider.stories.tsx | 236 --- .../src/slider/slider.tsx | 46 - .../src/stealth-button/README.md | 5 - .../src/stealth-button/index.ts | 49 - .../stealth-button/stealth-button.schema.2.ts | 47 - .../stealth-button/stealth-button.schema.ts | 46 - .../stealth-button/stealth-button.stories.tsx | 51 - .../src/subheading/README.md | 9 - .../src/subheading/index.ts | 44 - .../src/subheading/subheading.props.ts | 48 - .../src/subheading/subheading.schema.2.ts | 34 - .../src/subheading/subheading.schema.ts | 35 - .../src/subheading/subheading.spec.tsx | 126 -- .../src/subheading/subheading.stories.tsx | 48 - .../src/subheading/subheading.tsx | 81 - .../src/text-action/README.md | 5 - .../src/text-action/index.ts | 45 - .../src/text-action/text-action.props.ts | 76 - .../src/text-action/text-action.schema.2.ts | 49 - .../src/text-action/text-action.schema.ts | 46 - .../src/text-action/text-action.spec.tsx | 306 --- .../src/text-action/text-action.stories.tsx | 47 - .../src/text-action/text-action.tsx | 172 -- .../src/text-area/README.md | 5 - .../src/text-area/index.ts | 35 - .../src/text-area/text-area.schema.ts | 18 - .../src/text-area/text-area.stories.tsx | 42 - .../src/text-field/README.md | 7 - .../src/text-field/index.ts | 41 - .../src/text-field/text-field.props.ts | 27 - .../src/text-field/text-field.schema.ts | 28 - .../src/text-field/text-field.spec.tsx | 114 -- .../src/text-field/text-field.stories.tsx | 83 - .../src/text-field/text-field.tsx | 53 - .../src/toggle/README.md | 1 - .../src/toggle/index.ts | 38 - .../src/toggle/toggle.schema.2.ts | 61 - .../src/toggle/toggle.schema.ts | 61 - .../src/toggle/toggle.stories.tsx | 55 - .../src/tree-view-item/README.md | 5 - .../src/tree-view-item/index.ts | 39 - .../tree-view-item/tree-view-item.props.ts | 28 - .../tree-view-item/tree-view-item.schema.2.ts | 65 - .../tree-view-item/tree-view-item.schema.ts | 60 - .../tree-view-item/tree-view-item.spec.tsx | 98 - .../tree-view-item/tree-view-item.stories.tsx | 45 - .../src/tree-view-item/tree-view-item.tsx | 114 -- .../src/tree-view/README.md | 5 - .../src/tree-view/index.ts | 37 - .../src/tree-view/tree-view.schema.2.ts | 21 - .../src/tree-view/tree-view.schema.ts | 19 - .../src/tree-view/tree-view.stories.tsx | 202 -- .../src/typography/README.md | 1 - .../src/typography/index.ts | 48 - .../src/typography/typography.schema.2.ts | 43 - .../src/typography/typography.schema.ts | 44 - .../src/typography/typography.stories.tsx | 51 - .../src/utilities/index.ts | 3 - .../src/utilities/match-media.ts | 7 - .../tsconfig.build.json | 12 - .../fast-components-react-msft/tsconfig.json | 11 - .../webpack.config.js | 96 - .../fast-components-styles-msft/.eslintignore | 6 - .../fast-components-styles-msft/.eslintrc.js | 3 - .../fast-components-styles-msft/.npmignore | 6 - .../react/fast-components-styles-msft/.npmrc | 1 - .../.prettierignore | 4 - .../fast-components-styles-msft/CHANGELOG.md | 1342 ------------- .../fast-components-styles-msft/README.md | 606 ------ .../babel.config.js | 11 - .../generate-palettes.js | 30 - .../fast-components-styles-msft/package.json | 103 - .../rollup.config.js | 19 - .../src/accent-button/index.ts | 93 - .../src/action-toggle/index.ts | 125 -- .../src/action-trigger/index.ts | 153 -- .../src/auto-suggest-option/index.ts | 87 - .../src/auto-suggest/index.ts | 44 - .../src/badge/index.ts | 78 - .../src/breadcrumb/index.ts | 40 - .../src/button/index.ts | 351 ---- .../src/call-to-action/index.ts | 182 -- .../src/caption/index.ts | 11 - .../src/card/index.ts | 21 - .../src/carousel/index.ts | 275 --- .../src/checkbox/index.ts | 213 -- .../src/context-menu-item/index.ts | 87 - .../src/context-menu/index.ts | 37 - .../src/data-grid/index.ts | 86 - .../src/default-palette.ts | 196 -- .../src/design-system/design-system.schema.ts | 297 --- .../src/design-system/index.ts | 321 --- .../src/dialog/index.ts | 45 - .../src/divider/index.ts | 25 - .../src/flipper/index.ts | 100 - .../src/flyout/index.ts | 25 - .../src/heading/index.ts | 23 - .../src/hypertext/index.ts | 68 - .../src/image/index.ts | 26 - .../fast-components-styles-msft/src/index.ts | 260 --- .../src/label/index.ts | 20 - .../src/lightweight-button/index.ts | 102 - .../src/metatext/index.ts | 12 - .../src/neutral-button/index.ts | 59 - .../src/number-field/index.ts | 24 - .../src/outline-button/index.ts | 79 - .../src/paragraph/index.ts | 17 - .../src/patterns/button.ts | 80 - .../src/patterns/input-field.ts | 143 -- .../src/pivot/index.ts | 129 -- .../src/progress/index.ts | 201 -- .../src/radio/index.ts | 176 -- .../src/select-option/index.ts | 99 - .../src/select/index.ts | 128 -- .../src/slider-label/index.ts | 139 -- .../src/slider/index.ts | 308 --- .../src/stealth-button/index.ts | 56 - .../src/subheading/index.ts | 23 - .../src/text-action/index.ts | 220 -- .../src/text-area/index.ts | 19 - .../src/text-field/index.ts | 17 - .../src/toggle/index.ts | 218 -- .../src/tree-view-item/index.ts | 227 --- .../src/tree-view/index.ts | 17 - .../src/typography/index.ts | 43 - .../src/utilities/acrylic.ts | 52 - .../src/utilities/border.ts | 53 - .../src/utilities/color/accent-fill.spec.ts | 101 - .../src/utilities/color/accent-fill.ts | 138 -- .../color/accent-foreground-cut.spec.ts | 27 - .../utilities/color/accent-foreground-cut.ts | 43 - .../utilities/color/accent-foreground.spec.ts | 106 - .../src/utilities/color/accent-foreground.ts | 140 -- .../src/utilities/color/accessible-recipe.ts | 104 - .../src/utilities/color/color-constants.ts | 30 - .../src/utilities/color/common.spec.ts | 85 - .../src/utilities/color/common.ts | 219 -- .../utilities/color/create-color-palette.ts | 8 - .../src/utilities/color/index.ts | 129 -- .../utilities/color/neutral-divider.spec.ts | 12 - .../src/utilities/color/neutral-divider.ts | 18 - .../utilities/color/neutral-fill-card.spec.ts | 43 - .../src/utilities/color/neutral-fill-card.ts | 30 - .../color/neutral-fill-input.spec.ts | 115 -- .../src/utilities/color/neutral-fill-input.ts | 61 - .../color/neutral-fill-stealth.spec.ts | 128 -- .../utilities/color/neutral-fill-stealth.ts | 76 - .../utilities/color/neutral-fill-toggle.ts | 42 - .../src/utilities/color/neutral-fill.spec.ts | 126 -- .../src/utilities/color/neutral-fill.ts | 68 - .../src/utilities/color/neutral-focus.spec.ts | 19 - .../src/utilities/color/neutral-focus.ts | 68 - .../color/neutral-foreground-hint.spec.ts | 71 - .../color/neutral-foreground-hint.ts | 32 - .../color/neutral-foreground-toggle.ts | 51 - .../color/neutral-foreground.spec.ts | 90 - .../src/utilities/color/neutral-foreground.ts | 42 - .../src/utilities/color/neutral-layer.spec.ts | 172 -- .../src/utilities/color/neutral-layer.ts | 222 --- .../color/neutral-outline-contrast.ts | 50 - .../utilities/color/neutral-outline.spec.ts | 95 - .../src/utilities/color/neutral-outline.ts | 62 - .../src/utilities/color/palette.spec.ts | 343 ---- .../src/utilities/color/palette.ts | 369 ---- .../src/utilities/cursor.ts | 18 - .../src/utilities/density.spec.ts | 175 -- .../src/utilities/density.ts | 159 -- .../src/utilities/design-system.spec.ts | 27 - .../src/utilities/design-system.ts | 252 --- .../src/utilities/disabled.ts | 20 - .../src/utilities/elevation.spec.ts | 77 - .../src/utilities/elevation.ts | 144 -- .../src/utilities/fonts.ts | 47 - .../src/utilities/high-contrast.ts | 304 --- .../src/utilities/important.spec.ts | 15 - .../src/utilities/important.ts | 17 - .../src/utilities/keyof-to-type.ts | 4 - .../src/utilities/typography.ts | 168 -- .../tsconfig.build.json | 10 - .../fast-components-styles-msft/tsconfig.json | 7 - .../fast-jss-manager-react/.eslintignore | 6 - .../react/fast-jss-manager-react/.eslintrc.js | 3 - .../react/fast-jss-manager-react/.npmignore | 13 - packages/react/fast-jss-manager-react/.npmrc | 1 - .../fast-jss-manager-react/.prettierignore | 3 - .../react/fast-jss-manager-react/CHANGELOG.md | 586 ------ .../react/fast-jss-manager-react/README.md | 275 --- .../fast-jss-manager-react/babel.config.js | 12 - .../build/eslint-watch.js | 35 - .../react/fast-jss-manager-react/package.json | 107 - .../fast-jss-manager-react/src/context.ts | 16 - .../src/design-system-provider.spec.tsx | 92 - .../src/design-system-provider.tsx | 105 - .../react/fast-jss-manager-react/src/index.ts | 25 - .../src/jss-manager.spec.tsx | 345 ---- .../src/jss-manager.tsx | 337 ---- .../react/fast-jss-manager-react/src/jss.ts | 15 - .../src/manage-jss.spec.tsx | 42 - .../fast-jss-manager-react/src/manage-jss.tsx | 36 - .../src/sheet-manager.spec.ts | 211 -- .../src/sheet-manager.ts | 245 --- .../tsconfig.build.json | 9 - .../fast-jss-manager-react/tsconfig.json | 7 - packages/react/fast-jss-manager/.eslintignore | 6 - packages/react/fast-jss-manager/.eslintrc.js | 3 - packages/react/fast-jss-manager/.npmignore | 5 - packages/react/fast-jss-manager/.npmrc | 1 - .../react/fast-jss-manager/.prettierignore | 3 - packages/react/fast-jss-manager/CHANGELOG.md | 461 ----- packages/react/fast-jss-manager/README.md | 7 - .../react/fast-jss-manager/babel.config.js | 11 - packages/react/fast-jss-manager/package.json | 92 - packages/react/fast-jss-manager/src/index.js | 17 - .../react/fast-jss-manager/src/index.spec.ts | 35 - packages/react/fast-jss-manager/src/index.ts | 91 - .../fast-jss-manager/tsconfig.build.json | 9 - packages/react/fast-jss-manager/tsconfig.json | 7 - .../react/fast-jss-utilities/.eslintignore | 6 - .../react/fast-jss-utilities/.eslintrc.js | 3 - packages/react/fast-jss-utilities/.npmignore | 12 - packages/react/fast-jss-utilities/.npmrc | 1 - .../react/fast-jss-utilities/.prettierignore | 3 - .../react/fast-jss-utilities/CHANGELOG.md | 698 ------- packages/react/fast-jss-utilities/README.md | 230 --- .../react/fast-jss-utilities/babel.config.js | 12 - .../react/fast-jss-utilities/package.json | 90 - .../react/fast-jss-utilities/src/acrylic.ts | 66 - .../src/apply-focus-visible.spec.ts | 62 - .../src/apply-focus-visible.ts | 51 - .../react/fast-jss-utilities/src/focus.ts | 9 - .../fast-jss-utilities/src/format.spec.ts | 82 - .../react/fast-jss-utilities/src/format.ts | 36 - .../react/fast-jss-utilities/src/index.ts | 14 - .../src/localization.spec.ts | 81 - .../fast-jss-utilities/src/localization.ts | 63 - .../react/fast-jss-utilities/src/math.spec.ts | 109 - packages/react/fast-jss-utilities/src/math.ts | 83 - .../react/fast-jss-utilities/src/max-lines.ts | 22 - .../fast-jss-utilities/src/screen-reader.ts | 29 - .../fast-jss-utilities/src/truncation.ts | 19 - .../fast-jss-utilities/src/units.spec.ts | 26 - .../react/fast-jss-utilities/src/units.ts | 16 - .../src/with-defaults.spec.ts | 46 - .../fast-jss-utilities/src/with-defaults.ts | 9 - .../fast-jss-utilities/tsconfig.build.json | 10 - .../react/fast-jss-utilities/tsconfig.json | 7 - .../react/fast-layouts-react/.eslintignore | 8 - .../react/fast-layouts-react/.eslintrc.js | 6 - packages/react/fast-layouts-react/.npmignore | 15 - packages/react/fast-layouts-react/.npmrc | 1 - .../react/fast-layouts-react/.prettierignore | 3 - .../react/fast-layouts-react/CHANGELOG.md | 804 -------- packages/react/fast-layouts-react/README.md | 35 - .../react/fast-layouts-react/app/index.tsx | 123 -- .../react/fast-layouts-react/babel.config.js | 13 - .../react/fast-layouts-react/package.json | 121 -- .../src/canvas/canvas.props.ts | 14 - .../src/canvas/canvas.spec.tsx | 64 - .../fast-layouts-react/src/canvas/canvas.tsx | 68 - .../fast-layouts-react/src/canvas/index.ts | 25 - .../src/column/column.props.ts | 49 - .../src/column/column.spec.tsx | 299 --- .../fast-layouts-react/src/column/column.tsx | 213 -- .../fast-layouts-react/src/column/index.ts | 24 - .../src/container/container.props.ts | 9 - .../src/container/container.spec.tsx | 46 - .../src/container/container.tsx | 62 - .../fast-layouts-react/src/container/index.ts | 32 - .../src/grid/grid.no-css-grid.spec.tsx | 154 -- .../fast-layouts-react/src/grid/grid.props.ts | 81 - .../fast-layouts-react/src/grid/grid.spec.tsx | 250 --- .../fast-layouts-react/src/grid/grid.tsx | 205 -- .../fast-layouts-react/src/grid/index.ts | 30 - .../react/fast-layouts-react/src/index.ts | 8 - .../fast-layouts-react/src/page/index.ts | 18 - .../src/page/page.no-css-grid.spec.tsx | 43 - .../fast-layouts-react/src/page/page.props.ts | 26 - .../fast-layouts-react/src/page/page.spec.tsx | 120 -- .../fast-layouts-react/src/page/page.tsx | 64 - .../fast-layouts-react/src/pane/index.ts | 29 - .../fast-layouts-react/src/pane/pane.props.ts | 126 -- .../fast-layouts-react/src/pane/pane.spec.tsx | 712 ------- .../fast-layouts-react/src/pane/pane.tsx | 411 ---- .../react/fast-layouts-react/src/row/index.ts | 37 - .../fast-layouts-react/src/row/row.props.ts | 112 -- .../fast-layouts-react/src/row/row.spec.tsx | 599 ------ .../react/fast-layouts-react/src/row/row.tsx | 391 ---- .../src/utilities/breakpoint-tracker.spec.ts | 116 -- .../src/utilities/breakpoint-tracker.ts | 143 -- .../src/utilities/breakpoints.spec.ts | 76 - .../src/utilities/breakpoints.ts | 44 - .../fast-layouts-react/src/utilities/index.ts | 11 - .../src/utilities/string-extensions.spec.ts | 15 - .../src/utilities/string-extensions.ts | 10 - .../fast-layouts-react/tsconfig.build.json | 11 - .../react/fast-layouts-react/tsconfig.json | 7 - .../fast-layouts-react/webpack.config.js | 51 - .../react/fast-react-utilities/.eslintignore | 6 - .../react/fast-react-utilities/.eslintrc.js | 6 - .../react/fast-react-utilities/.npmignore | 17 - packages/react/fast-react-utilities/.npmrc | 1 - .../fast-react-utilities/.prettierignore | 2 - .../react/fast-react-utilities/CHANGELOG.md | 83 - packages/react/fast-react-utilities/README.md | 81 - .../fast-react-utilities/babel.config.js | 13 - .../react/fast-react-utilities/package.json | 102 - .../src/extract-element.spec.tsx | 74 - .../src/extract-element.ts | 26 - .../react/fast-react-utilities/src/index.ts | 7 - .../src/use-timeout.spec.tsx | 144 -- .../fast-react-utilities/src/use-timeout.ts | 59 - .../src/use-transition-state.spec.tsx | 182 -- .../src/use-transition-state.ts | 74 - .../fast-react-utilities/tsconfig.build.json | 12 - .../react/fast-react-utilities/tsconfig.json | 11 - .../.eslintignore | 6 - .../.eslintrc.js | 3 - .../fast-storybook-design-system-addon/.npmrc | 1 - .../.prettierignore | 1 - .../CHANGELOG.md | 400 ---- .../package.json | 92 - .../register.js | 1 - .../src/constants.ts | 5 - .../src/index.tsx | 86 - .../src/panel.tsx | 308 --- .../src/register.tsx | 20 - .../tsconfig.json | 12 - .../fast-storybook-presets/.eslintignore | 6 - .../react/fast-storybook-presets/.eslintrc.js | 3 - packages/react/fast-storybook-presets/.npmrc | 1 - .../fast-storybook-presets/.prettierignore | 1 - .../react/fast-storybook-presets/CHANGELOG.md | 396 ---- .../react/fast-storybook-presets/README.md | 31 - .../react/fast-storybook-presets/package.json | 53 - .../src/fast-design-system-addon-setup.ts | 5 - .../react/fast-storybook-presets/src/index.ts | 57 - .../fast-storybook-presets/src/setup.tsx | 25 - .../react/fast-storybook-presets/src/theme.ts | 7 - .../fast-storybook-presets/tsconfig.json | 10 - .../fast-figma-plugin-msft/tsconfig.json | 1 + .../tooling/fast-tooling-react/tsconfig.json | 1 + packages/utilities/fast-tslint-rules/.npmrc | 1 - .../utilities/fast-tslint-rules/CHANGELOG.md | 271 --- .../utilities/fast-tslint-rules/README.md | 36 - .../utilities/fast-tslint-rules/package.json | 29 - .../utilities/fast-tslint-rules/tslint.json | 50 - tsconfig.json | 1 - yarn.lock | 1770 ++--------------- 1043 files changed, 224 insertions(+), 88427 deletions(-) delete mode 100644 build/copy-readme.js delete mode 100644 build/documentation/copy-package-readme.js delete mode 100644 build/documentation/generate-typedocs.js delete mode 100644 docs/en/contributing/install.md delete mode 100644 docs/en/contributing/packages.md delete mode 100644 docs/en/contributing/policies.md delete mode 100644 docs/en/contributing/standards.md delete mode 100644 docs/en/contributing/status.md delete mode 100644 docs/en/contributing/testing.md delete mode 100644 docs/en/contributing/working.md delete mode 100644 docs/en/contributing/writing-style-guide.md delete mode 100644 docs/en/getting-started/design-system.md delete mode 100644 docs/en/getting-started/jss.md delete mode 100644 docs/en/getting-started/modifying-components.md delete mode 100644 docs/en/getting-started/the-basics.md delete mode 100644 docs/en/getting-started/utilities.md delete mode 100644 docs/readme.md delete mode 100644 packages/react/fast-components-class-name-contracts-base/.eslintignore delete mode 100644 packages/react/fast-components-class-name-contracts-base/.eslintrc.js delete mode 100644 packages/react/fast-components-class-name-contracts-base/.npmignore delete mode 100644 packages/react/fast-components-class-name-contracts-base/.npmrc delete mode 100644 packages/react/fast-components-class-name-contracts-base/.prettierignore delete mode 100644 packages/react/fast-components-class-name-contracts-base/CHANGELOG.md delete mode 100644 packages/react/fast-components-class-name-contracts-base/README.md delete mode 100644 packages/react/fast-components-class-name-contracts-base/package.json delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/auto-suggest/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/badge/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/breadcrumb/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/button/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/card/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/checkbox/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/context-menu-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/context-menu/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/data-grid/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/dialog/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/divider/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/horizontal-overflow/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/hypertext/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/image/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/label/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/listbox-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/listbox/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/managed-classes.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/number-field/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/progress/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/radio/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/select/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/slider-track-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/slider/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/stack-panel/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/tabs/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/text-area/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/text-field/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/toggle/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/tree-view-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/tree-view/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/typography/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/src/viewport-positioner/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-base/tsconfig.build.json delete mode 100644 packages/react/fast-components-class-name-contracts-base/tsconfig.json delete mode 100644 packages/react/fast-components-class-name-contracts-msft/.eslintignore delete mode 100644 packages/react/fast-components-class-name-contracts-msft/.eslintrc.js delete mode 100644 packages/react/fast-components-class-name-contracts-msft/.npmignore delete mode 100644 packages/react/fast-components-class-name-contracts-msft/.npmrc delete mode 100644 packages/react/fast-components-class-name-contracts-msft/.prettierignore delete mode 100644 packages/react/fast-components-class-name-contracts-msft/CHANGELOG.md delete mode 100644 packages/react/fast-components-class-name-contracts-msft/README.md delete mode 100644 packages/react/fast-components-class-name-contracts-msft/package.json delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/action-toggle/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/action-trigger/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/auto-suggest-option/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/auto-suggest/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/badge/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/button-base/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/button/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/call-to-action/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/caption/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/carousel/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/context-menu-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/data-grid/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/flipper/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/flyout/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/heading/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/managed-classes.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/metatext/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/paragraph/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/pivot/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/progress/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/select-option/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/select/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/slider-label/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/slider/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/subheading/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/text-action/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/text-field/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/src/tree-view-item/index.ts delete mode 100644 packages/react/fast-components-class-name-contracts-msft/tsconfig.build.json delete mode 100644 packages/react/fast-components-class-name-contracts-msft/tsconfig.json delete mode 100644 packages/react/fast-components-foundation-react/.eslintignore delete mode 100644 packages/react/fast-components-foundation-react/.eslintrc.js delete mode 100644 packages/react/fast-components-foundation-react/.npmignore delete mode 100644 packages/react/fast-components-foundation-react/.npmrc delete mode 100644 packages/react/fast-components-foundation-react/.prettierignore delete mode 100644 packages/react/fast-components-foundation-react/CHANGELOG.md delete mode 100644 packages/react/fast-components-foundation-react/README.md delete mode 100644 packages/react/fast-components-foundation-react/babel.config.js delete mode 100644 packages/react/fast-components-foundation-react/package.json delete mode 100644 packages/react/fast-components-foundation-react/src/foundation/foundation.props.ts delete mode 100644 packages/react/fast-components-foundation-react/src/foundation/foundation.spec.tsx delete mode 100644 packages/react/fast-components-foundation-react/src/foundation/foundation.ts delete mode 100644 packages/react/fast-components-foundation-react/src/foundation/index.ts delete mode 100644 packages/react/fast-components-foundation-react/src/index.ts delete mode 100644 packages/react/fast-components-foundation-react/tsconfig.build.json delete mode 100644 packages/react/fast-components-foundation-react/tsconfig.json delete mode 100644 packages/react/fast-components-react-base/.eslintignore delete mode 100644 packages/react/fast-components-react-base/.eslintrc.js delete mode 100644 packages/react/fast-components-react-base/.npmignore delete mode 100644 packages/react/fast-components-react-base/.npmrc delete mode 100644 packages/react/fast-components-react-base/.prettierignore delete mode 100644 packages/react/fast-components-react-base/.storybook/config.js delete mode 100644 packages/react/fast-components-react-base/.storybook/presets.js delete mode 100644 packages/react/fast-components-react-base/CHANGELOG.md delete mode 100644 packages/react/fast-components-react-base/README.md delete mode 100644 packages/react/fast-components-react-base/babel.config.js delete mode 100644 packages/react/fast-components-react-base/package.json delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/README.md delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest-context.tsx delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.props.ts delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx delete mode 100644 packages/react/fast-components-react-base/src/auto-suggest/index.ts delete mode 100644 packages/react/fast-components-react-base/src/badge/README.md delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.props.ts delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.schema.json delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/badge/badge.tsx delete mode 100644 packages/react/fast-components-react-base/src/badge/index.ts delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/README.md delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.props.ts delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.tsx delete mode 100644 packages/react/fast-components-react-base/src/breadcrumb/index.ts delete mode 100644 packages/react/fast-components-react-base/src/button/README.md delete mode 100644 packages/react/fast-components-react-base/src/button/button.props.ts delete mode 100644 packages/react/fast-components-react-base/src/button/button.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/button/button.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/button/button.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/button/button.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/button/button.tsx delete mode 100644 packages/react/fast-components-react-base/src/button/index.ts delete mode 100644 packages/react/fast-components-react-base/src/card/README.md delete mode 100644 packages/react/fast-components-react-base/src/card/card.props.ts delete mode 100644 packages/react/fast-components-react-base/src/card/card.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/card/card.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/card/card.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/card/card.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/card/card.tsx delete mode 100644 packages/react/fast-components-react-base/src/card/index.ts delete mode 100644 packages/react/fast-components-react-base/src/checkbox/DOCS.md delete mode 100644 packages/react/fast-components-react-base/src/checkbox/README.md delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.props.ts delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/checkbox/checkbox.tsx delete mode 100644 packages/react/fast-components-react-base/src/checkbox/index.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/README.md delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.props.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu-item/index.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu/README.md delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.props.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu/context-menu.tsx delete mode 100644 packages/react/fast-components-react-base/src/context-menu/index.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/README.md delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-cell.props.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-cell.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-cell.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-cell.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-context.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-row.props.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-row.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-row.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid-row.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid.props.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/data-grid.tsx delete mode 100644 packages/react/fast-components-react-base/src/data-grid/index.ts delete mode 100644 packages/react/fast-components-react-base/src/dialog/README.md delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.props.ts delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/dialog/dialog.tsx delete mode 100644 packages/react/fast-components-react-base/src/dialog/index.ts delete mode 100644 packages/react/fast-components-react-base/src/divider/README.md delete mode 100644 packages/react/fast-components-react-base/src/divider/divider.props.ts delete mode 100644 packages/react/fast-components-react-base/src/divider/divider.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/divider/divider.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/divider/divider.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/divider/divider.tsx delete mode 100644 packages/react/fast-components-react-base/src/divider/docs.md delete mode 100644 packages/react/fast-components-react-base/src/divider/index.ts delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/README.md delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.node.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.props.ts delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.tsx delete mode 100644 packages/react/fast-components-react-base/src/horizontal-overflow/index.ts delete mode 100644 packages/react/fast-components-react-base/src/hypertext/README.md delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.props.ts delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/hypertext/hypertext.tsx delete mode 100644 packages/react/fast-components-react-base/src/hypertext/index.ts delete mode 100644 packages/react/fast-components-react-base/src/image/README.md delete mode 100644 packages/react/fast-components-react-base/src/image/image.props.ts delete mode 100644 packages/react/fast-components-react-base/src/image/image.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/image/image.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/image/image.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/image/image.tsx delete mode 100644 packages/react/fast-components-react-base/src/image/index.ts delete mode 100644 packages/react/fast-components-react-base/src/index.spec.ts delete mode 100644 packages/react/fast-components-react-base/src/index.ts delete mode 100644 packages/react/fast-components-react-base/src/label/README.md delete mode 100644 packages/react/fast-components-react-base/src/label/index.ts delete mode 100644 packages/react/fast-components-react-base/src/label/label.props.ts delete mode 100644 packages/react/fast-components-react-base/src/label/label.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/label/label.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/label/label.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/label/label.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/label/label.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/README.md delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/index.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.props.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox-item/listbox-item.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox/README.md delete mode 100644 packages/react/fast-components-react-base/src/listbox/index.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox-context.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.props.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/listbox/listbox.tsx delete mode 100644 packages/react/fast-components-react-base/src/number-field/README.md delete mode 100644 packages/react/fast-components-react-base/src/number-field/index.ts delete mode 100644 packages/react/fast-components-react-base/src/number-field/number-field.props.ts delete mode 100644 packages/react/fast-components-react-base/src/number-field/number-field.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/number-field/number-field.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/number-field/number-field.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/number-field/number-field.tsx delete mode 100644 packages/react/fast-components-react-base/src/progress/README.md delete mode 100644 packages/react/fast-components-react-base/src/progress/index.ts delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.props.ts delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/progress/progress.tsx delete mode 100644 packages/react/fast-components-react-base/src/radio/README.md delete mode 100644 packages/react/fast-components-react-base/src/radio/index.ts delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.props.ts delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/radio/radio.tsx delete mode 100644 packages/react/fast-components-react-base/src/select/README.md delete mode 100644 packages/react/fast-components-react-base/src/select/index.ts delete mode 100644 packages/react/fast-components-react-base/src/select/select.props.ts delete mode 100644 packages/react/fast-components-react-base/src/select/select.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/select/select.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/select/select.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/select/select.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/select/select.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/README.md delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/index.ts delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.props.ts delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider-track-item/slider-track-item.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider/README.md delete mode 100644 packages/react/fast-components-react-base/src/slider/index.ts delete mode 100644 packages/react/fast-components-react-base/src/slider/slider-context.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.props.ts delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/slider/slider.tsx delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/README.md delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/index.ts delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/stack-panel.props.ts delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/stack-panel.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/stack-panel.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/stack-panel.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/stack-panel/stack-panel.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/README.md delete mode 100644 packages/react/fast-components-react-base/src/tabs/index.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-item.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-item.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-item.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-panel.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-panel.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-panel.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-panel.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab-panel.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tab.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/tabs/tabs.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-area/README.md delete mode 100644 packages/react/fast-components-react-base/src/text-area/index.ts delete mode 100644 packages/react/fast-components-react-base/src/text-area/text-area.props.ts delete mode 100644 packages/react/fast-components-react-base/src/text-area/text-area.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/text-area/text-area.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-area/text-area.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-area/text-area.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-field/README.md delete mode 100644 packages/react/fast-components-react-base/src/text-field/index.ts delete mode 100644 packages/react/fast-components-react-base/src/text-field/text-field.props.ts delete mode 100644 packages/react/fast-components-react-base/src/text-field/text-field.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/text-field/text-field.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-field/text-field.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/text-field/text-field.tsx delete mode 100644 packages/react/fast-components-react-base/src/toggle/README.md delete mode 100644 packages/react/fast-components-react-base/src/toggle/index.ts delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.props.ts delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/toggle/toggle.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/README.md delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/index.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view-item/tree-view-item.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view/README.md delete mode 100644 packages/react/fast-components-react-base/src/tree-view/index.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.props.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/tree-view/tree-view.tsx delete mode 100644 packages/react/fast-components-react-base/src/typography/README.md delete mode 100644 packages/react/fast-components-react-base/src/typography/index.ts delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.props.ts delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/typography/typography.tsx delete mode 100644 packages/react/fast-components-react-base/src/utilities/index.ts delete mode 100644 packages/react/fast-components-react-base/src/utilities/intersection-observer-entry.ts delete mode 100644 packages/react/fast-components-react-base/src/utilities/intersection-observer.ts delete mode 100644 packages/react/fast-components-react-base/src/utilities/resize-observer-entry.ts delete mode 100644 packages/react/fast-components-react-base/src/utilities/resize-observer.ts delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/README.md delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/index.ts delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-context.tsx delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.props.ts delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.schema.2.ts delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.schema.ts delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.spec.tsx delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.stories.tsx delete mode 100644 packages/react/fast-components-react-base/src/viewport-positioner/viewport-positioner.tsx delete mode 100644 packages/react/fast-components-react-base/tsconfig.build.json delete mode 100644 packages/react/fast-components-react-base/tsconfig.json delete mode 100644 packages/react/fast-components-react-msft/.eslintignore delete mode 100644 packages/react/fast-components-react-msft/.eslintrc.js delete mode 100644 packages/react/fast-components-react-msft/.npmignore delete mode 100644 packages/react/fast-components-react-msft/.npmrc delete mode 100644 packages/react/fast-components-react-msft/.prettierignore delete mode 100644 packages/react/fast-components-react-msft/.storybook/config.js delete mode 100644 packages/react/fast-components-react-msft/.storybook/presets.js delete mode 100644 packages/react/fast-components-react-msft/CHANGELOG.md delete mode 100644 packages/react/fast-components-react-msft/README.md delete mode 100644 packages/react/fast-components-react-msft/assets/carousel-hero-content.tsx delete mode 100644 packages/react/fast-components-react-msft/assets/svg-element.tsx delete mode 100644 packages/react/fast-components-react-msft/babel.config.js delete mode 100644 packages/react/fast-components-react-msft/mock.js delete mode 100644 packages/react/fast-components-react-msft/package.json delete mode 100644 packages/react/fast-components-react-msft/src/accent-button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/accent-button/accent-button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/accent-button/accent-button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/accent-button/accent-button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/accent-button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/README.md delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/action-toggle.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-toggle/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/README.md delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/action-trigger.tsx delete mode 100644 packages/react/fast-components-react-msft/src/action-trigger/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/README.md delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/auto-suggest-option.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest-option/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/README.md delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/auto-suggest.tsx delete mode 100644 packages/react/fast-components-react-msft/src/auto-suggest/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/background/README.md delete mode 100644 packages/react/fast-components-react-msft/src/background/background.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/background/background.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/background/background.tsx delete mode 100644 packages/react/fast-components-react-msft/src/background/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/badge/README.md delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/badge/badge.tsx delete mode 100644 packages/react/fast-components-react-msft/src/badge/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/breadcrumb/README.md delete mode 100644 packages/react/fast-components-react-msft/src/breadcrumb/breadcrumb.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/breadcrumb/breadcrumb.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/breadcrumb/breadcrumb.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/breadcrumb/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/button-base/button-base.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/button-base/button-base.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/button-base/button-base.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/button-base/button-base.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/button-base/button-base.tsx delete mode 100644 packages/react/fast-components-react-msft/src/button-base/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/button/button.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/button/button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/button/button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/button/button.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/button/button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/button/button.tsx delete mode 100644 packages/react/fast-components-react-msft/src/button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/README.md delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/call-to-action.tsx delete mode 100644 packages/react/fast-components-react-msft/src/call-to-action/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/caption/README.md delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/caption/caption.tsx delete mode 100644 packages/react/fast-components-react-msft/src/caption/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/card/README.md delete mode 100644 packages/react/fast-components-react-msft/src/card/card.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/card/card.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/card/card.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/card/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/carousel/README.md delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/carousel/carousel.tsx delete mode 100644 packages/react/fast-components-react-msft/src/carousel/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/checkbox/README.md delete mode 100644 packages/react/fast-components-react-msft/src/checkbox/checkbox.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/checkbox/checkbox.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/checkbox/checkbox.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/checkbox/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/README.md delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/context-menu-item.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu-item/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/README.md delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/context-menu.tsx delete mode 100644 packages/react/fast-components-react-msft/src/context-menu/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/README.md delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/data-grid-cell.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/data-grid-row.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/data-grid.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/data-grid.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/data-grid/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/dialog/README.md delete mode 100644 packages/react/fast-components-react-msft/src/dialog/dialog.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/dialog/dialog.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/dialog/dialog.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/dialog/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/divider/README.md delete mode 100644 packages/react/fast-components-react-msft/src/divider/divider.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/divider/divider.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/divider/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/flipper/README.md delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flipper/flipper.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flipper/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/flyout/README.md delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flyout/flyout.tsx delete mode 100644 packages/react/fast-components-react-msft/src/flyout/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/heading/README.md delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/heading/heading.tsx delete mode 100644 packages/react/fast-components-react-msft/src/heading/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/hypertext/README.md delete mode 100644 packages/react/fast-components-react-msft/src/hypertext/hypertext.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/hypertext/hypertext.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/hypertext/hypertext.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/hypertext/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/image/README.md delete mode 100644 packages/react/fast-components-react-msft/src/image/image.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/image/image.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/image/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/index.spec.ts delete mode 100644 packages/react/fast-components-react-msft/src/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/label/README.md delete mode 100644 packages/react/fast-components-react-msft/src/label/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/label/label.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/label/label.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/label/label.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/lightweight-button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/lightweight-button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/lightweight-button/lightweight-button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/lightweight-button/lightweight-button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/lightweight-button/lightweight-button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/metatext/README.md delete mode 100644 packages/react/fast-components-react-msft/src/metatext/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/metatext/metatext.tsx delete mode 100644 packages/react/fast-components-react-msft/src/neutral-button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/neutral-button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/neutral-button/neutral-button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/neutral-button/neutral-button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/neutral-button/neutral-button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/number-field/README.md delete mode 100644 packages/react/fast-components-react-msft/src/number-field/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/number-field/number-field.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/number-field/number-field.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/outline-button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/outline-button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/outline-button/outline-button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/outline-button/outline-button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/outline-button/outline-button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/README.md delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/paragraph/paragraph.tsx delete mode 100644 packages/react/fast-components-react-msft/src/pivot/README.md delete mode 100644 packages/react/fast-components-react-msft/src/pivot/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/pivot/pivot.tsx delete mode 100644 packages/react/fast-components-react-msft/src/progress/README.md delete mode 100644 packages/react/fast-components-react-msft/src/progress/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/progress/progress.tsx delete mode 100644 packages/react/fast-components-react-msft/src/radio/README.md delete mode 100644 packages/react/fast-components-react-msft/src/radio/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/radio/radio.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/radio/radio.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/radio/radio.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select-option/README.md delete mode 100644 packages/react/fast-components-react-msft/src/select-option/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select-option/select-option.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select/README.md delete mode 100644 packages/react/fast-components-react-msft/src/select/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/select/select.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/select/select.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/select/select.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/select/select.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select/select.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/select/select.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/README.md delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider-label/slider-label.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider/README.md delete mode 100644 packages/react/fast-components-react-msft/src/slider/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/slider/slider.tsx delete mode 100644 packages/react/fast-components-react-msft/src/stealth-button/README.md delete mode 100644 packages/react/fast-components-react-msft/src/stealth-button/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/stealth-button/stealth-button.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/stealth-button/stealth-button.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/stealth-button/stealth-button.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/subheading/README.md delete mode 100644 packages/react/fast-components-react-msft/src/subheading/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/subheading/subheading.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-action/README.md delete mode 100644 packages/react/fast-components-react-msft/src/text-action/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-action/text-action.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-area/README.md delete mode 100644 packages/react/fast-components-react-msft/src/text-area/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-area/text-area.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-area/text-area.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-field/README.md delete mode 100644 packages/react/fast-components-react-msft/src/text-field/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-field/text-field.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-field/text-field.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/text-field/text-field.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-field/text-field.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/text-field/text-field.tsx delete mode 100644 packages/react/fast-components-react-msft/src/toggle/README.md delete mode 100644 packages/react/fast-components-react-msft/src/toggle/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/toggle/toggle.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/toggle/toggle.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/toggle/toggle.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/README.md delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.props.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.spec.tsx delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/tree-view-item/tree-view-item.tsx delete mode 100644 packages/react/fast-components-react-msft/src/tree-view/README.md delete mode 100644 packages/react/fast-components-react-msft/src/tree-view/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view/tree-view.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view/tree-view.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/tree-view/tree-view.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/typography/README.md delete mode 100644 packages/react/fast-components-react-msft/src/typography/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/typography/typography.schema.2.ts delete mode 100644 packages/react/fast-components-react-msft/src/typography/typography.schema.ts delete mode 100644 packages/react/fast-components-react-msft/src/typography/typography.stories.tsx delete mode 100644 packages/react/fast-components-react-msft/src/utilities/index.ts delete mode 100644 packages/react/fast-components-react-msft/src/utilities/match-media.ts delete mode 100644 packages/react/fast-components-react-msft/tsconfig.build.json delete mode 100644 packages/react/fast-components-react-msft/tsconfig.json delete mode 100644 packages/react/fast-components-react-msft/webpack.config.js delete mode 100644 packages/react/fast-components-styles-msft/.eslintignore delete mode 100644 packages/react/fast-components-styles-msft/.eslintrc.js delete mode 100644 packages/react/fast-components-styles-msft/.npmignore delete mode 100644 packages/react/fast-components-styles-msft/.npmrc delete mode 100644 packages/react/fast-components-styles-msft/.prettierignore delete mode 100644 packages/react/fast-components-styles-msft/CHANGELOG.md delete mode 100644 packages/react/fast-components-styles-msft/README.md delete mode 100644 packages/react/fast-components-styles-msft/babel.config.js delete mode 100644 packages/react/fast-components-styles-msft/generate-palettes.js delete mode 100644 packages/react/fast-components-styles-msft/package.json delete mode 100644 packages/react/fast-components-styles-msft/rollup.config.js delete mode 100644 packages/react/fast-components-styles-msft/src/accent-button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/action-toggle/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/action-trigger/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/auto-suggest-option/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/auto-suggest/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/badge/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/breadcrumb/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/call-to-action/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/caption/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/card/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/carousel/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/checkbox/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/context-menu-item/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/context-menu/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/data-grid/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/default-palette.ts delete mode 100644 packages/react/fast-components-styles-msft/src/design-system/design-system.schema.ts delete mode 100644 packages/react/fast-components-styles-msft/src/design-system/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/dialog/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/divider/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/flipper/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/flyout/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/heading/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/hypertext/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/image/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/label/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/lightweight-button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/metatext/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/neutral-button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/number-field/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/outline-button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/paragraph/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/patterns/button.ts delete mode 100644 packages/react/fast-components-styles-msft/src/patterns/input-field.ts delete mode 100644 packages/react/fast-components-styles-msft/src/pivot/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/progress/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/radio/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/select-option/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/select/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/slider-label/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/slider/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/stealth-button/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/subheading/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/text-action/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/text-area/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/text-field/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/toggle/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/tree-view-item/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/tree-view/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/typography/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/acrylic.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/border.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-fill.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-fill.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-foreground-cut.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-foreground-cut.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-foreground.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accent-foreground.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/accessible-recipe.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/color-constants.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/common.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/common.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/create-color-palette.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/index.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-divider.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-divider.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-card.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-card.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-input.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-input.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-stealth.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-stealth.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill-toggle.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-fill.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-focus.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-focus.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-foreground-hint.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-foreground-hint.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-foreground-toggle.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-foreground.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-foreground.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-layer.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-layer.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-outline-contrast.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-outline.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/neutral-outline.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/palette.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/color/palette.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/cursor.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/density.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/density.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/design-system.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/design-system.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/disabled.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/elevation.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/elevation.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/fonts.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/high-contrast.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/important.spec.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/important.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/keyof-to-type.ts delete mode 100644 packages/react/fast-components-styles-msft/src/utilities/typography.ts delete mode 100644 packages/react/fast-components-styles-msft/tsconfig.build.json delete mode 100644 packages/react/fast-components-styles-msft/tsconfig.json delete mode 100644 packages/react/fast-jss-manager-react/.eslintignore delete mode 100644 packages/react/fast-jss-manager-react/.eslintrc.js delete mode 100644 packages/react/fast-jss-manager-react/.npmignore delete mode 100644 packages/react/fast-jss-manager-react/.npmrc delete mode 100644 packages/react/fast-jss-manager-react/.prettierignore delete mode 100644 packages/react/fast-jss-manager-react/CHANGELOG.md delete mode 100644 packages/react/fast-jss-manager-react/README.md delete mode 100644 packages/react/fast-jss-manager-react/babel.config.js delete mode 100644 packages/react/fast-jss-manager-react/build/eslint-watch.js delete mode 100644 packages/react/fast-jss-manager-react/package.json delete mode 100644 packages/react/fast-jss-manager-react/src/context.ts delete mode 100644 packages/react/fast-jss-manager-react/src/design-system-provider.spec.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/design-system-provider.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/index.ts delete mode 100644 packages/react/fast-jss-manager-react/src/jss-manager.spec.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/jss-manager.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/jss.ts delete mode 100644 packages/react/fast-jss-manager-react/src/manage-jss.spec.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/manage-jss.tsx delete mode 100644 packages/react/fast-jss-manager-react/src/sheet-manager.spec.ts delete mode 100644 packages/react/fast-jss-manager-react/src/sheet-manager.ts delete mode 100644 packages/react/fast-jss-manager-react/tsconfig.build.json delete mode 100644 packages/react/fast-jss-manager-react/tsconfig.json delete mode 100644 packages/react/fast-jss-manager/.eslintignore delete mode 100644 packages/react/fast-jss-manager/.eslintrc.js delete mode 100644 packages/react/fast-jss-manager/.npmignore delete mode 100644 packages/react/fast-jss-manager/.npmrc delete mode 100644 packages/react/fast-jss-manager/.prettierignore delete mode 100644 packages/react/fast-jss-manager/CHANGELOG.md delete mode 100644 packages/react/fast-jss-manager/README.md delete mode 100644 packages/react/fast-jss-manager/babel.config.js delete mode 100644 packages/react/fast-jss-manager/package.json delete mode 100644 packages/react/fast-jss-manager/src/index.js delete mode 100644 packages/react/fast-jss-manager/src/index.spec.ts delete mode 100644 packages/react/fast-jss-manager/src/index.ts delete mode 100644 packages/react/fast-jss-manager/tsconfig.build.json delete mode 100644 packages/react/fast-jss-manager/tsconfig.json delete mode 100644 packages/react/fast-jss-utilities/.eslintignore delete mode 100644 packages/react/fast-jss-utilities/.eslintrc.js delete mode 100644 packages/react/fast-jss-utilities/.npmignore delete mode 100644 packages/react/fast-jss-utilities/.npmrc delete mode 100644 packages/react/fast-jss-utilities/.prettierignore delete mode 100644 packages/react/fast-jss-utilities/CHANGELOG.md delete mode 100644 packages/react/fast-jss-utilities/README.md delete mode 100644 packages/react/fast-jss-utilities/babel.config.js delete mode 100644 packages/react/fast-jss-utilities/package.json delete mode 100644 packages/react/fast-jss-utilities/src/acrylic.ts delete mode 100644 packages/react/fast-jss-utilities/src/apply-focus-visible.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/apply-focus-visible.ts delete mode 100644 packages/react/fast-jss-utilities/src/focus.ts delete mode 100644 packages/react/fast-jss-utilities/src/format.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/format.ts delete mode 100644 packages/react/fast-jss-utilities/src/index.ts delete mode 100644 packages/react/fast-jss-utilities/src/localization.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/localization.ts delete mode 100644 packages/react/fast-jss-utilities/src/math.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/math.ts delete mode 100644 packages/react/fast-jss-utilities/src/max-lines.ts delete mode 100644 packages/react/fast-jss-utilities/src/screen-reader.ts delete mode 100644 packages/react/fast-jss-utilities/src/truncation.ts delete mode 100644 packages/react/fast-jss-utilities/src/units.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/units.ts delete mode 100644 packages/react/fast-jss-utilities/src/with-defaults.spec.ts delete mode 100644 packages/react/fast-jss-utilities/src/with-defaults.ts delete mode 100644 packages/react/fast-jss-utilities/tsconfig.build.json delete mode 100644 packages/react/fast-jss-utilities/tsconfig.json delete mode 100644 packages/react/fast-layouts-react/.eslintignore delete mode 100644 packages/react/fast-layouts-react/.eslintrc.js delete mode 100644 packages/react/fast-layouts-react/.npmignore delete mode 100644 packages/react/fast-layouts-react/.npmrc delete mode 100644 packages/react/fast-layouts-react/.prettierignore delete mode 100644 packages/react/fast-layouts-react/CHANGELOG.md delete mode 100644 packages/react/fast-layouts-react/README.md delete mode 100644 packages/react/fast-layouts-react/app/index.tsx delete mode 100644 packages/react/fast-layouts-react/babel.config.js delete mode 100644 packages/react/fast-layouts-react/package.json delete mode 100644 packages/react/fast-layouts-react/src/canvas/canvas.props.ts delete mode 100644 packages/react/fast-layouts-react/src/canvas/canvas.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/canvas/canvas.tsx delete mode 100644 packages/react/fast-layouts-react/src/canvas/index.ts delete mode 100644 packages/react/fast-layouts-react/src/column/column.props.ts delete mode 100644 packages/react/fast-layouts-react/src/column/column.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/column/column.tsx delete mode 100644 packages/react/fast-layouts-react/src/column/index.ts delete mode 100644 packages/react/fast-layouts-react/src/container/container.props.ts delete mode 100644 packages/react/fast-layouts-react/src/container/container.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/container/container.tsx delete mode 100644 packages/react/fast-layouts-react/src/container/index.ts delete mode 100644 packages/react/fast-layouts-react/src/grid/grid.no-css-grid.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/grid/grid.props.ts delete mode 100644 packages/react/fast-layouts-react/src/grid/grid.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/grid/grid.tsx delete mode 100644 packages/react/fast-layouts-react/src/grid/index.ts delete mode 100644 packages/react/fast-layouts-react/src/index.ts delete mode 100644 packages/react/fast-layouts-react/src/page/index.ts delete mode 100644 packages/react/fast-layouts-react/src/page/page.no-css-grid.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/page/page.props.ts delete mode 100644 packages/react/fast-layouts-react/src/page/page.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/page/page.tsx delete mode 100644 packages/react/fast-layouts-react/src/pane/index.ts delete mode 100644 packages/react/fast-layouts-react/src/pane/pane.props.ts delete mode 100644 packages/react/fast-layouts-react/src/pane/pane.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/pane/pane.tsx delete mode 100644 packages/react/fast-layouts-react/src/row/index.ts delete mode 100644 packages/react/fast-layouts-react/src/row/row.props.ts delete mode 100644 packages/react/fast-layouts-react/src/row/row.spec.tsx delete mode 100644 packages/react/fast-layouts-react/src/row/row.tsx delete mode 100644 packages/react/fast-layouts-react/src/utilities/breakpoint-tracker.spec.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/breakpoint-tracker.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/breakpoints.spec.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/breakpoints.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/index.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/string-extensions.spec.ts delete mode 100644 packages/react/fast-layouts-react/src/utilities/string-extensions.ts delete mode 100644 packages/react/fast-layouts-react/tsconfig.build.json delete mode 100644 packages/react/fast-layouts-react/tsconfig.json delete mode 100644 packages/react/fast-layouts-react/webpack.config.js delete mode 100644 packages/react/fast-react-utilities/.eslintignore delete mode 100644 packages/react/fast-react-utilities/.eslintrc.js delete mode 100644 packages/react/fast-react-utilities/.npmignore delete mode 100644 packages/react/fast-react-utilities/.npmrc delete mode 100644 packages/react/fast-react-utilities/.prettierignore delete mode 100644 packages/react/fast-react-utilities/CHANGELOG.md delete mode 100644 packages/react/fast-react-utilities/README.md delete mode 100644 packages/react/fast-react-utilities/babel.config.js delete mode 100644 packages/react/fast-react-utilities/package.json delete mode 100644 packages/react/fast-react-utilities/src/extract-element.spec.tsx delete mode 100644 packages/react/fast-react-utilities/src/extract-element.ts delete mode 100644 packages/react/fast-react-utilities/src/index.ts delete mode 100644 packages/react/fast-react-utilities/src/use-timeout.spec.tsx delete mode 100644 packages/react/fast-react-utilities/src/use-timeout.ts delete mode 100644 packages/react/fast-react-utilities/src/use-transition-state.spec.tsx delete mode 100644 packages/react/fast-react-utilities/src/use-transition-state.ts delete mode 100644 packages/react/fast-react-utilities/tsconfig.build.json delete mode 100644 packages/react/fast-react-utilities/tsconfig.json delete mode 100644 packages/react/fast-storybook-design-system-addon/.eslintignore delete mode 100644 packages/react/fast-storybook-design-system-addon/.eslintrc.js delete mode 100644 packages/react/fast-storybook-design-system-addon/.npmrc delete mode 100644 packages/react/fast-storybook-design-system-addon/.prettierignore delete mode 100644 packages/react/fast-storybook-design-system-addon/CHANGELOG.md delete mode 100644 packages/react/fast-storybook-design-system-addon/package.json delete mode 100644 packages/react/fast-storybook-design-system-addon/register.js delete mode 100644 packages/react/fast-storybook-design-system-addon/src/constants.ts delete mode 100644 packages/react/fast-storybook-design-system-addon/src/index.tsx delete mode 100644 packages/react/fast-storybook-design-system-addon/src/panel.tsx delete mode 100644 packages/react/fast-storybook-design-system-addon/src/register.tsx delete mode 100644 packages/react/fast-storybook-design-system-addon/tsconfig.json delete mode 100644 packages/react/fast-storybook-presets/.eslintignore delete mode 100644 packages/react/fast-storybook-presets/.eslintrc.js delete mode 100644 packages/react/fast-storybook-presets/.npmrc delete mode 100644 packages/react/fast-storybook-presets/.prettierignore delete mode 100644 packages/react/fast-storybook-presets/CHANGELOG.md delete mode 100644 packages/react/fast-storybook-presets/README.md delete mode 100644 packages/react/fast-storybook-presets/package.json delete mode 100644 packages/react/fast-storybook-presets/src/fast-design-system-addon-setup.ts delete mode 100644 packages/react/fast-storybook-presets/src/index.ts delete mode 100644 packages/react/fast-storybook-presets/src/setup.tsx delete mode 100644 packages/react/fast-storybook-presets/src/theme.ts delete mode 100644 packages/react/fast-storybook-presets/tsconfig.json delete mode 100644 packages/utilities/fast-tslint-rules/.npmrc delete mode 100644 packages/utilities/fast-tslint-rules/CHANGELOG.md delete mode 100644 packages/utilities/fast-tslint-rules/README.md delete mode 100644 packages/utilities/fast-tslint-rules/package.json delete mode 100644 packages/utilities/fast-tslint-rules/tslint.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 19de0fb3608..f35d38ab23e 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -30,21 +30,6 @@ build/ @janechu @nicholasrice @chrisdholt @awentzel @EisenbergEffect # Package specific owners -# React -/packages/react/fast-components-class-name-contracts-base/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-components-class-name-contracts-msft/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-components-foundation-react/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-components-react-base/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-components-react-msft/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-components-styles-msft/ @chrisdholt @janechu @nicholasrice -/packages/react/fast-jss-manager/ @nicholasrice @janechu @chrisdholt -/packages/react/fast-jss-manager-react/ @nicholasrice @janechu @chrisdholt -/packages/react/fast-jss-utilities/ @nicholasrice @janechu @chrisdholt -/packages/react/fast-layouts-react/ @chrisdholt @nicholasrice -/packages/react/fast-react-utilities/ @chrisdholt @nicholasrice -/packages/react/fast-storybook-design-system-addon/ @nicholasrice @chrisdholt @janechu -/packages/react/fast-storybook-presets/ @nicholasrice @chrisdholt @janechu - # Tooling /packages/tooling/fast-figma-plugin-msft/ @nicholasrice @bheston @janechu @EisenbergEffect /packages/tooling/fast-tooling-react/ @janechu @nicholasrice @chrisdholt @EisenbergEffect diff --git a/.github/workflows/ci-daily.yml b/.github/workflows/ci-daily.yml index 4041edda1a2..c996e0a6f3f 100644 --- a/.github/workflows/ci-daily.yml +++ b/.github/workflows/ci-daily.yml @@ -51,15 +51,6 @@ jobs: with: coverageCommand: lerna run coverage coverageLocations: | - ${{github.workspace}}/packages/react/fast-components-foundation-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-react-base/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-react-msft/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-styles-msft/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-manager/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-manager-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-utilities/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-layouts-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-react-utilities/coverage/lcov.info:lcov ${{github.workspace}}/packages/tooling/fast-tooling/coverage/lcov.info:lcov ${{github.workspace}}/packages/tooling/fast-tooling-react/coverage/lcov.info:lcov ${{github.workspace}}/packages/utilities/fast-animation/coverage/lcov.info:lcov diff --git a/.github/workflows/testing/ci-daily-local.yml b/.github/workflows/testing/ci-daily-local.yml index 96a6546c57a..d5bc292cf95 100644 --- a/.github/workflows/testing/ci-daily-local.yml +++ b/.github/workflows/testing/ci-daily-local.yml @@ -35,15 +35,6 @@ jobs: with: coverageCommand: lerna run coverage coverageLocations: | - ${{github.workspace}}/packages/react/fast-components-foundation-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-react-base/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-react-msft/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-components-styles-msft/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-manager/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-manager-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-jss-utilities/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-layouts-react/coverage/lcov.info:lcov - ${{github.workspace}}/packages/react/fast-react-utilities/coverage/lcov.info:lcov ${{github.workspace}}/packages/tooling/fast-tooling/coverage/lcov.info:lcov ${{github.workspace}}/packages/tooling/fast-tooling-react/coverage/lcov.info:lcov ${{github.workspace}}/packages/utilities/fast-animation/coverage/lcov.info:lcov diff --git a/build/copy-readme.js b/build/copy-readme.js deleted file mode 100644 index c0134691bb1..00000000000 --- a/build/copy-readme.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Utility for copying readme to their dist folders. - * Usage: node build/copy-readme.js - */ -const path = require("path"); -const fs = require("fs"); -const glob = require("glob"); - -const rootDir = path.resolve(process.cwd()); -const srcReadmePaths = "src/**/README.md"; -const destDir = "dist"; - -/** - * Function to copy readme files to their dist folder - */ -function copyReadmeFiles() { - const resolvedSrcReadmePaths = path.resolve(rootDir, srcReadmePaths); - - glob(resolvedSrcReadmePaths, void(0), function(error, files) { - files.forEach((filePath) => { - const destReadmePath = filePath.replace(/(\bsrc\b)(?!.*\1)/, destDir); - fs.copyFileSync(filePath, destReadmePath); - }); - }); -} - -/** - * Copy all files - */ -copyReadmeFiles(); diff --git a/build/documentation/copy-package-readme.js b/build/documentation/copy-package-readme.js deleted file mode 100644 index b04f214455c..00000000000 --- a/build/documentation/copy-package-readme.js +++ /dev/null @@ -1,168 +0,0 @@ -/** - * Utility for copying and mocking the copying of readme files from packages to .docs/en/packages/[package-name]/readme.md. - * Usage (copy):run node build/documentation/copy-package-readme.js OR - * yarn docs:build - * Usage (dry-run):run node build/documentation/copy-package-readme.js --dry-run OR - * yarn docs:dry-run - */ -const path = require("path"); -const fs = require("fs"); -const glob = require("glob"); -const chalk = require("chalk"); - -const rootDir = path.resolve(process.cwd()); -const srcReadmePaths = "packages/*/*/?(readme.md|README.md)"; -const destDir = path.join("docs", "en", "packages/"); -const srcSidebar = path.join("sites/website", "sidebars.json"); - -var dryRun = false; -var sidebarEntries = []; - -var totalDocsCount; -var updatedDocsCount = 0; - -/** - * Determine if a dry run will be executed based off --dry-run argument being present - * if an invalid third parameter is entered, the application will exit - */ -process.argv.forEach(function (val, index) { - var validArg = true; - - if (index == 2) { - val === "--dry-run" ? (dryRun = true) : (validArg = false); - } - - if (!validArg) { - console.log( - chalk.red("Invalid argument used. To perform a dry-run use --dry-run") - ); - process.exit(1); - } -}); - -/** - * Function to copy readme files to the ./docs/en/packages folder - * and update Docusaurus sidebar, ./website/sidebars.json - */ -function copyReadmeFiles() { - const resolvedSrcReadmePaths = path.resolve(rootDir, srcReadmePaths); - - dryRun - ? console.log(`In ${destDir}, this script would...`) - : console.log(`In ${destDir}...`); - - fs.readdir("packages", (err, files) => { - totalDocsCount = files.length; - }); - - createDirectory(destDir); - glob(resolvedSrcReadmePaths, { realpath: true }, function (error, srcFiles) { - srcFiles.forEach(srcReadmePath => { - createDestReadme(srcReadmePath); - const srcDirPath = path.dirname(srcReadmePath); - const lastSrcDir = srcDirPath.split(path.sep).pop(); - - sidebarEntries.push(`en/packages/${lastSrcDir}/index`); - }); - - console.log( - chalk.green( - `${updatedDocsCount} of ${totalDocsCount} package readme.md files updated` - ) - ); - updateSidebar(); - }); -} - -/** - * Builds a new readme in ./docs/en/packages - * Creates and adds a docusaurus header to the new file - * Then appends the original readme from .docs/en/packages/[package-name] - */ -function createDestReadme(srcReadmePath) { - const destReadmePath = srcReadmePath.replace( - /(\bpackages\/\b)(\breact\/\b|\btooling\/\b|\butilities\/\b)(?!.*\1)/, - destDir - ); - - const destDirPath = path.dirname(destReadmePath); - const srcDirPath = path.dirname(srcReadmePath); - const srcReadmeText = fs.readFileSync(srcReadmePath).toString(); - - var folderName = srcDirPath.split(path.sep).pop(); - - var lines = fs.readFileSync(srcReadmePath, "utf-8").split("\n").filter(Boolean); - - var title = lines[0].replace(/#/g, "").replace(/FAST/g, "").trim(); - - var docusaurusHeader = - `---\n` + - `id: index\n` + - `title: FAST ${title}\n` + - `sidebar_label: ${title}\n` + - `---\n\n`; - - createDirectory(destDirPath); - - if (dryRun) { - if (fs.existsSync(destReadmePath)) { - console.log(`...REPLACE readme.md in the '${folderName}' folder`); - } else { - console.log(`...ADD readme.md to the '${folderName}' folder`); - } - } else { - try { - fs.writeFileSync(destReadmePath, docusaurusHeader); - fs.appendFileSync(destReadmePath, srcReadmeText); - updatedDocsCount++; - console.log(`...${folderName} was succesfully updated`); - } catch (err) { - console.log(chalk.red(err)); - } - } -} - -/** - * Updates ./website/sidebars.json - */ -function updateSidebar() { - var sidebarJSONPath = path.resolve(rootDir, srcSidebar); - const sidebarText = fs.readFileSync(sidebarJSONPath).toString(); - var sidebarJSON = JSON.parse(sidebarText); - sidebarJSON.docs.Packages = []; - - sidebarEntries.map(entry => sidebarJSON.docs.Packages.push(entry)); - - if (dryRun) { - console.log( - "In website/sidebars.json, this script updates...\n" + - "...the Packages array with the filepath to each package's index file." - ); - } else { - fs.writeFile( - sidebarJSONPath, - JSON.stringify(sidebarJSON, null, 2), - "utf8", - err => { - if (err) throw err; - console.log(chalk.green(`${srcSidebar} was succesfully updated!`)); - } - ); - } -} - -/** - * Utility function that creates new folders - * based off dir argument - */ -function createDirectory(dir) { - if (!fs.existsSync(dir)) { - dryRun ? console.log(`...CREATE the '${dir}' folder.`) : fs.mkdirSync(dir); - } -} - -/** - * Run script - * Based off presence of --dry-run parameter - */ -copyReadmeFiles(); diff --git a/build/documentation/generate-typedocs.js b/build/documentation/generate-typedocs.js deleted file mode 100644 index 2aeb840cd9d..00000000000 --- a/build/documentation/generate-typedocs.js +++ /dev/null @@ -1,193 +0,0 @@ -/** - * Utility for generating TypeDoc API documentation and placing it in the docs/en/packages folder so it can be hosted by - * GitHub pages and viewed through Docusaurus. - * Contains a dry run command to investigate how the script will operate without actually writing to anything. - * Contains a verbose option to print detailed build output generated by the typedoc processes that create the - * api documentation. - * - * Usage :run node build/documentation/generate-typedocs.js OR - * Usage (dry-run): run node build/documentation/generate-typedocs.js --dry-run - * Usage (verbose): run node build/documentation/generate-typedocs.js --verbose - */ - -const path = require("path"); -const fs = require("fs"); -const glob = require("glob"); -const os = require("os"); -const chalk = require("chalk"); -const yargs = require("yargs"); - -const { exec } = require("child_process"); -const { spawn } = require("child_process"); - -const rootDir = path.resolve(process.cwd()); -const srcDir = "packages/*/*"; -const destDir = path.join("docs", "en", "packages"); - -var copyReadmeScript = "copy-package-readme.js"; -var copyReadmeScriptPath = path.join("build", "documentation", copyReadmeScript); -var dryRun = false; -var verbose = false; - -const excludedPackages = ["fast-eslint-rules", "fast-tslint-rules"]; - -/** - * Obtain command line aguments - * If present when the script is run, their corresponding flags get set to true - */ -const argv = yargs.argv; -dryRun = argv.dryRun; -verbose = argv.verbose; - -/** - * Run the copy readme script, then this one if successful - * To prevent new links constantly being appended to the readme every - * time the script is run, the copy readme script is run to regenerate - * files to their original form with the needed header - */ - -var proc = dryRun - ? exec(`node ${copyReadmeScriptPath} --dry-run`) - : exec(`node ${copyReadmeScriptPath}`); - -proc.stdout.on("data", function (data) { - process.stdout.write(data); -}); - -proc.on("error", err => { - console.log(chalk.red(err)); -}); - -proc.on("close", function (code) { - console.log(chalk.green(`${copyReadmeScript} ran successfully.`)); - execute(); -}); - -/** - * Generate TypeDocs for each package - */ -function execute() { - if (dryRun) { - console.log(`In ${destDir}, this script would...`); - } else { - console.log(`Generating API documentation using TypeDoc...`); - } - - const packages = path.resolve(rootDir, srcDir); - - glob(packages, { realpath: true }, function (error, srcFiles) { - srcFiles.forEach(srcPath => { - var valid = true; - - var packageName = srcPath.split(path.sep).pop(); - - excludedPackages.forEach(excludedPackageName => { - if (packageName === excludedPackageName) { - console.log( - chalk.yellow( - `...skip generating TypeDoc API files for ${packageName}` - ) - ); - valid = false; - } - }); - - if (valid) { - dryRun - ? console.log(`...generate TypeDoc API files for ${packageName}`) - : createAPIFiles(packageName, srcPath); - } - }); - }); -} - -/** - * Uses TypeDoc process to generate API docs for a given package - * Stores them in the docs/en/packages folder - */ -function createAPIFiles(packageName, srcPath) { - var config = path.join(srcPath, "/build.tsconfig.json"); - var output = path.join(destDir, packageName, "api"); - var file = - packageName === "fast-animation" - ? path.join(srcPath, "/lib/index.ts") - : path.join(srcPath, "/src/index.ts"); - - var typedocCmd = os.platform() == "win32" ? "typedoc.cmd" : "typedoc"; - var typedocPath = path.join("node_modules", ".bin", typedocCmd); - - const typedoc = spawn( - typedocPath, // the local TypeDoc installation is needed for the markdown theme to work - [ - "--tsconfig", - config, - "--excludeNotExported", - "--out", - output, - file, - "--theme", - "markdown", - ] - ); - - typedoc.on("close", code => { - if (code) { - console.log( - chalk.red( - `${packageName} - TypeDoc API docs not generated, error code: ${code}` - ) - ); - } else { - console.log(`${packageName} - TypeDoc API docs generated`); - addHeaderToReadme(packageName); - addAPILinkToReadme(packageName); - } - }); - - // if set to true, will print detailed build output for typedoc process - // useful for debugging - if (verbose) { - typedoc.stdout.on("data", data => { - console.log(`${data}`); - }); - } - - typedoc.on("error", err => { - console.log(chalk.red(err)); - }); -} - -/** - * If the TypeDoc readme doesn't have this header - * It won't be accessible in docusaurus - */ -function addHeaderToReadme(packageName) { - const readmePath = path.join(destDir, packageName, "api", "README.md"); - const readmeText = fs.readFileSync(readmePath).toString(); - - var docusaurusHeader = `---\n` + `id: index\n` + `---\n\n`; - - try { - fs.writeFileSync(readmePath, docusaurusHeader); - fs.appendFileSync(readmePath, readmeText); - } catch (err) { - console.log(chalk.red(err)); - } -} - -/** - * Creates link in package readme.md docs used by Docusaurus - * Said link routes to the TypeDoc API docs generated by this script - */ -function addAPILinkToReadme(packageName) { - var readmePath = path.join(destDir, packageName, "README.md"); - var apiLink = "api"; - - var usageText = "\n" + `[API Reference](${apiLink})`; - - fs.appendFile(readmePath, usageText, function (err) { - if (err) { - console.log(chalk.red(err)); - } - }); -} diff --git a/docs/en/contributing/install.md b/docs/en/contributing/install.md deleted file mode 100644 index 7a2df828c00..00000000000 --- a/docs/en/contributing/install.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: install -title: Install -sidebar_label: Install ---- - -# Install - -## Prerequisites - -Before setting up FAST, install Git and Yarn. - -## Setup the source repository - -Clone the repository, `cd` into the project, install Lerna and install dependencies: - -```shell -git clone https://github.com/Microsoft/fast.git -cd fast -yarn global add lerna -``` - -Installs all the dependencies: - -```shell -yarn -``` - -Builds all the packages: - -```shell -lerna run prepare -``` - -- `yarn eslint` or `yarn eslint:fix` executes eslint in a given package. -- `yarn unit-tests` executes unit testing for packages. -- `yarn test` executes processes in a package required to pass before check-in and generally includes building, linting, and unit testing. - -To run these processes across *all* projects, substitute `yarn` for `lerna run ____`: - -```shell -lerna run test -``` - -## Understanding packages - -All packages can be found in the repository [packages](https://github.com/Microsoft/fast/tree/master/packages) folder. Each package includes a `README.md` at its root for documentation. - -## Dependencies - -Dependencies are minimized to simplify upgrade cycles and encourage frequent updates with less friction and reduced impact. diff --git a/docs/en/contributing/packages.md b/docs/en/contributing/packages.md deleted file mode 100644 index 9600093a2de..00000000000 --- a/docs/en/contributing/packages.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: packages -title: Packages -sidebar_label: Packages ---- - -# Packages - -Before contributing a new package, it will go through a proposal process to be accepted by the Steering Committee. - -## Folder structure - -### Tracked folders - -Always include an `src` folder at the root level of the package. The `src` folder should include all of the un-minified source code and test files for the project. Place test files in the same folder as the file they are testing and name it using the `*.spec.ts` or `*.spec.tsx` pattern. - -When it is necessary to create a testing folder, it should be named `__tests__`. - -For TypeScript projects, export all relevant files from the `index.ts` or `index.tsx` file in the `src` folder so that, when importing, only the folder name is needed. Keep the folder structure as flat as possible. - -When a testing application is needed, it should be created in an `app` directory at the root of the package. - -![Example of tracked folder structure with fast-package at the top and __tests__, app and src inside.](https://res.cloudinary.com/fast-dna/image/upload/v1546297640/creating_packages_tracked_folders.webp "") -*Example structure for tracked folders.* - -### Untracked folders - -Untracked folders are folders included in the `.gitignore` and generated by an automated process. - -These may include: - -* A `node_modules` folder for npm dependencies -- generated by the `npm i` command. -* A `dist` folder for the exported code -- generated by compiling TypeScript and specified by the `tsconfig.json`. -* A `www` folder for exported compiled applications if creating an `app` folder -- generated by `webpack` and specified by the `webpack.config.js`. -* A `coverage` folder for test coverage reporting. - -## package.json - -All packages use npm and are published to the [npm registry](https://www.npmjs.com/). - -### Side effects - -All packages are expected to be side-effect free. Adding a `"sideEffects": false` flag to the package.json indicates to tools like webpack that the package's modules have no side effects (on evaluation) and only expose exports. This allows these tools to optimize re-exports through tree-shaking and dead code removal. - -### Scripts - -Unless specified, scripts are defined in the `package.json` scripts property so they can be run with `npm run [script-name]`. - -The following scripts are required: - -* `npm run build` builds the exported package. -* `npm run clean:dist` cleans the distribution folder. -* `npm run prepare` cleans the distribution folder and builds the exported package. -* `npm run prettier` ensures code is formatted correctly (runs on a global repository githook). -* `npm run prettier:diff` provides a hook to ensure code formatting matches expectations on the build server. -* `npm run test` runs all tests. -* `npm run eslint` runs eslint. - -Additional scripts and common use cases include: - -* `npm start` starts the webpack-dev-server. -* `npm run eslint:fix` runs eslint with the fix option. -* `npm run watch` watches the files and builds the exported package when making changes to the source files. - -## .npmignore - -The `.npmignore` file removes: - -* All testinging files; usually by targetting the `__tests__`, `*.spec.*` and `*.test.*` patterns. -* All unminified code; usually by targetting the `src` folder. -* The `babel.config.js` if it has been added to the package. - -## Webpack - -A Webpack application can be created using `webpack` and `webpack-dev-server` for testing and/or documentation purposes. If it is necessary to publish a webpack application that serves as a documentation site to a live site, a production webpack build should be made available. - -Applications using `webpack-dev-server` can also serve as a means for testing using E2E testing frameworks. - -## Typescript - -Use TypeScript for packages that include JavaScript and make sure to add `tsconfig.json` and `.eslintrc.js` files. - -Published packages must be in ES6 module format to support tree-shaking. - -## README format - -```markdown -# [packageName] - - -[packageDescription] - -## Benefits - - -* [packageBenefit1] -* [packageBenefit2] - -## Package status - - - -:soon: **Proposal: This package contains code and APIs may change and have gaps in stability, testing and documentation. Your feedback is encouraged.** - -:sos: **Experimental: This package contains code and APIs are likely to change, may not be stable, and may be missing tests and documentation.** - -## Usage - -### Installation - -[installationGuidance] - -### Getting started - - -[gettingStartedGuidance] - -### Properties/Configuration/etc. - - -[detailedGuidance] - -## Examples - - -[Examples] - -## Exports - - -[Exports] - -## Additional resources - - -[Resource 1](https://) -[Resource 2](https://) -``` \ No newline at end of file diff --git a/docs/en/contributing/policies.md b/docs/en/contributing/policies.md deleted file mode 100644 index b2bb15bb872..00000000000 --- a/docs/en/contributing/policies.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: policies -title: Policies -sidebar_label: Policies ---- - -# Policies - -* [Licensing](https://github.com/Microsoft/fast/blob/master/LICENSE) -* [Contributions](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) -* [Code of Conduct](https://github.com/Microsoft/fast/blob/master/CODE_OF_CONDUCT.md) \ No newline at end of file diff --git a/docs/en/contributing/standards.md b/docs/en/contributing/standards.md deleted file mode 100644 index 9565d091922..00000000000 --- a/docs/en/contributing/standards.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: standards -title: Standards -sidebar_label: Standards ---- - -# Standards - -Our contributors use these standards for consistency and quality in the repository. - -## Naming conventions - -* Avoid abbreviations unless they are common industry acronyms. -* Use names that are clear and intuitive. -* Use semantic names instead of presentational. - -## Accessibility - -Accessibility is acknowledged from the start of each new feature and must be addressed in a specification in the created issue before work can begin. - -### Animation - -* Users should have a mechanism to reduce or remove animations from their experience. The Safari developers have proposed a media query for reduced animation. ("prefers-reduced-motion"). Animations longer than 3 seconds must provide a way to stop the motion. -* Some users with vestibular disorders or other cognitive disabilities have problems with movement. A safe fallback for nearly all users is fade animations. -* Avoid flashing animations can cause seizures or discomfort. - -## JSS usage - -JSS (JavaScript Style Sheets) class names interfaces follow a [BEM-like](http://getbem.com/naming/) convention but our implementation of BEM is slightly modified because dashes — the character used to delimit *modifiers* — cannot be used as JavaScript object keys without using string literals; we use underscores instead. A single underscore separates an element from a block while two underscores separate a modifier from a block or element. - -Example: - -```html -block_element__modifier -``` - -Within a block, element, or modifier, words should be camelCased: - -```html -anotherBlock_anotherElement__anotherModifier diff --git a/docs/en/contributing/status.md b/docs/en/contributing/status.md deleted file mode 100644 index 649c18c5796..00000000000 --- a/docs/en/contributing/status.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: status -title: Status -sidebar_label: Status ---- - -# Status - -This page can be used to display the health of FAST systems. - -* [Circle CI - Status](https://status.circleci.com/) -* [Code Climate - Status](https://status.codeclimate.com/) -* [Azure DevOps - Status](https://status.dev.azure.com/) - -## Azure DevOps Pipeline - -### Component Explorer - -#### Builds (CI) - -[![Build Status](https://dev.azure.com/edgewebui/FAST/_apis/build/status/Component%20Explorer%20-%20CI?branchName=master)](https://dev.azure.com/edgewebui/FAST/_build/latest?definitionId=65&branchName=master) - -#### Deployments (CD) - -| Staging | Production | -|--|--| -|[![Build status](https://vsrm.dev.azure.com/edgewebui/_apis/public/Release/badge/db5c5831-7b32-4ef1-9e7d-205361d49e08/2/2)](https://explore-stage.azurewebsites.net) |[![Build Status](https://vsrm.dev.azure.com/edgewebui/_apis/public/Release/badge/db5c5831-7b32-4ef1-9e7d-205361d49e08/2/3)](https://explore.fast.design) | -| https://explore-stage.azurewebsites.net | https://explore.fast.design | - Automatically released after commit to master | Manually released after design approval diff --git a/docs/en/contributing/testing.md b/docs/en/contributing/testing.md deleted file mode 100644 index f4441cbc448..00000000000 --- a/docs/en/contributing/testing.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: testing -title: Testing -sidebar_label: Testing ---- - -# Testing - -## Checklist - -This testing checklist is a good starting point for manual testing web applications. - -1. Test each page for design and content issues - 1. Test screen sizes from viewport 1 to 6 - 2. Test screen orientations - 1. Portrait - 2. Landscape - 3. Test word length and case - 1. Test the smallest amount of text - 2. Test the largest amount of text - 3. Case sensitivity -2. Test for localization (RTL, LTR) -3. Test for progressive enhancement - 1. Test complete browser matrix - 2. Test for zooming browser from 200% and 25% -4. Test each component and pages for accessibility issues - 1. Test for keyboard accessibility - 2. Test for Mouse only interaction - 3. Test for Touch interaction - 4. Test with High Contrast of OS - 5. Test without images - 6. Test for text only - 7. Test with a screen reader - -## Manual testing - -FAST UI development tools offer a solution for manually testing components during development. Easily test with features such as viewport, localized direction (RTL or LTR), background transparency, color themes, and interactive properties. - -Additionally, we offer testing services under `./build/testing` that can be used to assist in comprehensive testing. We have included these configurations and tests as a starting point. Run the tests manually, and the cloud services dashboard can be used to evaluate your code changes before submitting for code review. - -### Testing on physical devices - -When testing local code on physical devices, Localtunnel allows you to easily share a web service on your local machine without managing DNS and firewall settings. - -Localtunnel assigns a unique publicly accessible URL that proxies all requests to your local web server. - -#### Quickstart - -Install Localtunnel globally (requires NodeJS): - -```bash -npm install -g localtunnel -``` - -* Start a web server on a local port (eg, [http://localhost:8000](http://localhost:8000)) and use the command line interface to request a tunnel to the local server: - -```bash -lt --port 8000 -``` - -* You receive a URL to share as long as your local instance remains active. Requests route to your local service at the specified port. - -### Testing with Sauce Labs - -[Sauce Labs](https://saucelabs.com/beta/dashboard/builds) lets collaborators and contributors execute automated tests against Selenium WebDriver on pre-configured browser matrix's. - -The cross-browser testing strategy focuses on the differences between browser rendering engines. There are three different [configuration files](https://github.com/Microsoft/fast/tree/master/build/testing) based on feature maturity of ongoing work. - -[Alpha](https://github.com/Microsoft/fast/blob/master/build/testing/config-browsers.alpha.js) - immature feature development: - -```bash -node build/testing/sauce-labs/test-browsers.js alpha -``` - -[Beta](https://github.com/Microsoft/fast/blob/master/build/testing/config-browsers.beta.js) - stable feature development: - -```bash -node build/testing/sauce-labs/test-browsers.js beta -``` - -[Release](https://github.com/Microsoft/fast/blob/master/build/testing/config-browsers.release.js) - mature feature development: - -```bash -node build/testing/sauce-labs/test-browsers.js release -``` - -### Testing with Applitools - -[Applitools](https://eyes.applitools.com/) can be used to run visual regression tests on UI changes for your branches and allows you to execute automated tests against Selenium WebDriver with ChromeDriver and FirefoxDriver. - -Before making any UI changes on a new branch, run Applitools to create a baseline set of images. - -1. When executing a test for the first time on a new branch, Applitools generates screenshots with an 'undefined' status. -2. Once the tests finish, users should select all checkboxes and click **save** to generate the baseline image. -3. Make changes to your UI code. -4. Rerun the first set of tests and for all snapshots that match the baseline - the images turn green and show as 'passed' status. Any images with 'undefined' status would be caused by additional UI changes. Getting into this state requires new test cases in the `./run-msft-docs.js` file. Anomalies marked red have a 'failed' status. -5. Manually verify all the UI changes and save the new baseline. - -Once undesired changes are fixed, retest: - -```bash -node build/testing/applitools/test-javascript.js -``` - -#### Visual Regression testing with Cypress SDK - -Contributors can perform functional user interface and experience testing using [Cypress](https://www.cypress.io/). - -To validate Cypress is configured correctly: - -```bash -npm run ui-tests:verify -``` - -Execute through Electron for real-time user interaction and debugging: - -```bash -npm run ui-tests:open -``` - -Execute using the CLI: - -```bash -npm run ui-tests:run -``` - -When running as CLI, the results can be viewed printing to the command screen or in the cloud dashboard. - -## Cross browser testing - -You can read more from [Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) on cross-browser testing and processes. - -Report browser bugs by following these links: - -* [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/) -* [Firefox](https://bugzilla.mozilla.org/) -* [Safari](https://bugs.webkit.org/) -* [Chrome](https://bugs.chromium.org/p/chromium/issues/list) -* [Opera](https://bugs.opera.com/wizard/desktop) diff --git a/docs/en/contributing/working.md b/docs/en/contributing/working.md deleted file mode 100644 index a5721511b05..00000000000 --- a/docs/en/contributing/working.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: working -title: Working -sidebar_label: Working ---- - -# Working - -## Managing issues - -Well crafted issues improve the speed that work can be triaged, understood, and completed. To help guide this process [issue templates](https://github.com/Microsoft/fast/tree/master/.github/ISSUE_TEMPLATE) exist to allow users to choose an appropriate [bug report](https://github.com/Microsoft/fast/blob/master/.github/ISSUE_TEMPLATE/report-a-bug.md) or [feature request](https://github.com/Microsoft/fast/blob/master/.github/ISSUE_TEMPLATE/request-a-feature.md). - -Here's an excellent resource for [do's and don'ts](https://hackernoon.com/45-github-issues-dos-and-donts-dfec9ab4b612) when working with bugs, issues, and requests. - -[GitHub labels](https://developer.github.com/v3/issues/labels/) are used to manage issues broadly considered work items grouped by color and prefixed by label name. - -## Pull requests - -When landing a pull request (PR), individuals must modify the original commit message to include comprehensive details. This detail along with other git history meta information deploys as part of the documentation changelog history. Changelogs are generated by [Lerna](https://lernajs.io/) using [conventional commits](https://conventionalcommits.org/). - -PR commit messages should include the issue number per the [github closing issue keywords](https://help.github.com/articles/closing-issues-using-keywords/) documentation. - -One or more collaborators are automatically assigned to review each PR based on areas of [ownership](https://github.com/Microsoft/fast/blob/master/.github/CODEOWNERS). - -When a peer review is created, a [template](https://github.com/Microsoft/fast/blob/master/.github/pull_request_template.md) is provided that includes the best practices and processes for a review message. - -### Interim commits - -The above outlines the format for the **final** commit, but contributors have many interim commits while working on their branch. These commits should be succinct, concise, and consistent for best readability. Always remember, a diff tells you _what_ changed in a commit, but only the commit message can adequately tell you _why_. - -Typical interim commits may look like the following: - -```bash -5ba3db6 update toggle markup for accessibility -84564a0 add border styles -887815f remove toggle underline on hover -``` - -Before submitting a pull request, [rebase](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) your branch from master or use the *update* button provided by GitHub. - -## Common commands - -All "packages" share common script names for consistency along with their documentation guides. - -To clean all packages node_modules: - -```bash -lerna clean -``` - -To clean dependencies hoisted by yarn, navigate to the root of the project and run: - -```bash -rm -rf node_modules -``` - -Install remote dependencies, build, and symlink local dependencies: - -```bash -yarn install -lerna run prepare -``` - -To run all tests on all packages: - -```bash -lerna run test -``` - -To run all tests on a single package: - -```bash -cd packages/package-name -yarn test -``` - -Most packages have a _watch_ command that rebuilds the package's distribution when a file changes. This process can be useful when doing development across multiple packages: - -```bash -yarn watch -``` - -## Troubleshooting - -If you run into any errors and they seem unrelated to your work try the following procedure: - -Delete root node_modules (`fast/node_modules`) then: - -```bash -lerna clean -yarn install -lerna run test -``` - -See if your issue reproduces. \ No newline at end of file diff --git a/docs/en/contributing/writing-style-guide.md b/docs/en/contributing/writing-style-guide.md deleted file mode 100644 index c6971e01e20..00000000000 --- a/docs/en/contributing/writing-style-guide.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: writing-style-guide -title: Writing style guide -sidebar_label: Writing style guide ---- - -# Writing style guide - -Most writing guidelines used for this project come from the [Chicago Manual of Style][CMoS] and [The Associated Press Stylebook][APS]. When these two publications have conflicting guidance, the Chicago Manual of Style is usually preferred. - -We recognize that many of our contributors may not have access to these paid resources, so we provide a *style guide amendment* that covers many of the most common issues as well as some guidance that is different for this project, or is not covered in other guides. - -For guidance not covered by this amendment, several free resources can be used as a supplement: - -* [The National Geographic style manual][NGSM] -* [The Guardian and Observer style guide][GaOSG] -* [The BBC News style guide][TBNS] - -## Style guide amendment - -### Punctuation - -**Parentheses with periods**: When a complete sentence is inside of parentheses, place the period inside the ending parenthesis. If the words are not a complete sentence the period or other punctuation goes on the outside. - -A complete sentence in parenthesis: - -> (The first time it said 'hello world,' I knew we would be friends.) - -A sentence fragment in parenthesis: - -> The first time it said 'hello world,' I knew we would be friends (and we still are). - -**Quotation marks with periods**: When a sentence ends with a quotation mark, the period goes on the inside. The only exception to this rule in cases where the quotation marks are around text intended to be input by the user, but in these cases, use `code` formatting. - ->The boy said, "The first time it said 'hello world,' I knew we would be friends." - ->At the prompt, type `hello world`. - -**Colons on sentences**: When a sentence proceeds and is describing or introducing a code block, list or example; use a colon. - -Code block: - -> To run the script, type: -> ```bash -> run hello-world -> ``` - -List: - -> It has said the following: -> * hello world - -Example: - -> An example of how to format phrases it can say: -> > Hello world -> > Hello world! -> > Hello world? - -**Periods on sentences**: Except for a sentence proceeding a code block, list, or example; end all complete sentences with a period including sentences in code comments and list items. - -Code comment: - -> ```javascript -> // Update this string to change what it will say. -> -> alert("hello world"); -> ``` - -List: - -> Over the years, I have had a few say 'hello world' to me: -> * The first was a CBM 8032 I received for my 12th birthday. - -### Headings - -**Page heading**: Start all pages with a level 1 heading. - -Markdown: - -```markdown -# My first computer -``` - -HTML: - -```HTML -

My first computer

-``` - -**Sentence case headings**: Headings formatted in sentence case. The exception is proper names and acronyms that are capitalized. - -*Heading in sentence case:* - -> #### My first computer - -*Heading with acronym:* - -> #### My first CBM 8032 - -*Heading with proper name:* - -> #### My first Commodore - -**Punctuation on headings**: Do not put periods on headings and avoid headings that are questions or complete sentences. - -### References - -**HTML elements**: When referencing HTML elements, use the element syntax inside angle brackets with the word 'element' or 'elements' in context. Include a link to the MDN documentation for the element: - -> Use an [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) element for hypertext. - -> The elements [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) are not equivalent. - -**UI text**: When referencing text in a UI such as a name in a button or menu item, use **bold** formatting: - -> Click the **submit** button. - -**Named objects**: When referencing named objects such as other components or packages, use *italic* formatting with a descriptive word such as "component" in context: - -> Use the *button* component. - -**Code**: When referencing code, console commands, or file names; use `code` formatting: - -> Type `npm start` in the console. - -> Use the `fast-animation` package. - -> The `console.log()` method outputs a message to the console. - -### Markdown - -**Element spacing**: Use one line break between markdown elements. - -For example, between headings, paragraphs, code fences, and images: - -```markdown -# Heading 1 - -Paragraph - -* List 1 -* List 2 - -## Heading 2 - -![Image](https://image.url) -``` - -**Trailing space**: Remove trailing spaces at the end of elements and do not include an extra line break at the end of the markdown file. - -**Unordered lists**: Use `*` syntax for un-ordered lists: - -> ```markdown -> Technologies used: -> -> * TypeScript -> * React -> * JSS -> ``` - -### Code - -**Code fence languages**: Provide a language for code fences: - -Example CSS code fence: - -````markdown - ```css - .selector { - background: white; - } - ``` -```` - -You can find a list of supported languages [here](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml). - -**Testing examples**: Test your code examples to verify they are working as expected. - -**Code guidelines**: Verify that code examples follow the projects coding guidelines. For example, four spaces for indenting. - -#### Code comments - -Code comments can be fragments or complete sentences. Depending on the format, there are slightly different guidelines. - -Code comments in **sentence** format: - -* Can be formatted as a single line or multi-line syntax. -* Have periods or question marks at the end. - -Code comments in **fragment** format: - -* Are formatted as single line syntax. -* Do *not* have periods or question marks at the end. - -[CMoS]: https://www.amazon.com/Chicago-Manual-Style-16th/dp/0226104206/ref=pd_lpo_sbs_14_t_0?_encoding=UTF8&psc=1&refRID=2QG7JEGM9PVNQJR5V00Y - -[APS]: https://www.amazon.com/Associated-Press-Stylebook-2018-ebook-dp-B07DJBHCKP/dp/B07DJBHCKP/ref=mt_kindle?_encoding=UTF8&me=&qid=1546304954 - -[NGSM]: https://sites.google.com/a/ngs.org/ngs-style-manual/home/C/computer-terms - -[GaOSG]: https://www.theguardian.com/guardian-observer-style-guide-a - -[TBNS]: http://www2.media.uoa.gr/lectures/linguistic_archives/academic_papers0506/notes/stylesheets_3.pdf \ No newline at end of file diff --git a/docs/en/getting-started/design-system.md b/docs/en/getting-started/design-system.md deleted file mode 100644 index 384721e3e0d..00000000000 --- a/docs/en/getting-started/design-system.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: design-system -title: Design system -sidebar_label: Design system ---- - -# Design System - -## Working with the design system provider -The `DesignSystemProvider` is a React component that provides, via [React context](https://reactjs.org/docs/context.html), the *design-system* object to descendent context consumers. - -It accepts a `designSystem` property: -```jsx - - /* children */ - -``` - -The `DesignSystemProvider` is designed to apply scoped changes to the *design-system* object, so it will merge the applied *design-system* with any upstream *design-system* object: - -```jsx - - /* Stylesheet generated with {backgroundColor: "#FFF", density: 3} */ - I'm a styled button - - - /* Stylesheet generated with {backgroundColor: "#AAA", density: 3} */ - I'm another styled button - - -``` \ No newline at end of file diff --git a/docs/en/getting-started/jss.md b/docs/en/getting-started/jss.md deleted file mode 100644 index aacdac5a8e2..00000000000 --- a/docs/en/getting-started/jss.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: jss -title: JSS (JavaScript Style Sheets) -sidebar_label: JSS (JavaScript Style Sheets) ---- - -# Working with JSS -For info on how to write JSS stylesheets, visit [https://cssinjs.org/jss-syntax?v=v10.0.0](https://cssinjs.org/jss-syntax?v=v10.0.0) - -## Accessing the design system in JSS -The `JSSManager` allows us to access the current contextual design system by assigning a function value to a JSS rule. The only argument to this callback will be the current design system. For more information on the providing a design system object to the styles, see the documentation for [fast-jss-manager-react](https://www.fast.design/docs/en/packages/fast-jss-manager-react/). - -```js -// This code assumes a property `backgroundProperty` exists on the design system -const styles = { - button: { - backgroundColor: (designSystem) => designSystem.backgroundColor - } -} -``` \ No newline at end of file diff --git a/docs/en/getting-started/modifying-components.md b/docs/en/getting-started/modifying-components.md deleted file mode 100644 index fde44222f7f..00000000000 --- a/docs/en/getting-started/modifying-components.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: modifying-components -title: Modifying components -sidebar_label: Modifying components ---- - -# Modifying components - -## Using Props - -Each component will have its own set of [props](https://reactjs.org/docs/components-and-props.html#rendering-a-component) corresponding to the functionality needed for that component. - -```jsx - - Hello World - -``` -## Unhandled props -FAST components implement a model of props know as *handled* and *unhandled* props. *Handled* props can be thought of as first-class props explicitly used or expected by the component. *Unhandled* props are all other props. In general, all *unhandled* props will be passed along to the root element of the component, and are generally used to address instance accessibility requirements, custom event listeners, and add telemetry meta-data. - -```jsx -/* - * aria-label is an unhandled prop, so it gets - * applied to the root of the Button component - */ - - Hello world - -``` - -## Changing style - -### Using classes -```jsx - - Hello World - -``` - -### Using props -Instance style overrides can be applied using the `jssStyleSheet` property and targetting properties of the [class-name contract](#class-name-contracts). - -```jsx -let styles = { - button: { - margin: "0 auto" - } -}; - - - Hello World - -``` - -### Using inline-styles -Additionally, you can always use inline-styles. This will be treated as a *unhandled* prop and -applied to the root element of the component. - -```jsx - - Hello World - -``` diff --git a/docs/en/getting-started/the-basics.md b/docs/en/getting-started/the-basics.md deleted file mode 100644 index d24575993ee..00000000000 --- a/docs/en/getting-started/the-basics.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: the-basics -title: The basics -sidebar_label: The basics ---- - -# The basics - -This document assumes a basic understanding of React. If you're unfamiliar, please read [React's getting started](https://reactjs.org/docs/getting-started.html) documentation first. - -## Add a component to your page - - -An easy way to get started with FAST styled components is the `@microsoft/fast-components-react-msft` package which conforms to Microsoft style guidance. - -To use a styled component, simply import it from the package: - -```jsx -import { AccentButton } from "@microsoft/fast-components-react-msft"; -``` -And add the component to your markup: -```jsx -function render() { - return Hello world -} -``` - -A full list of these components and their documentation can be found [here](https://explore.fast.design/). - ---- - -## Core concepts - -### Base components -At the heart of the FAST component system are *base* components. *Base* components are general purpose, unstyled React components designed to meet semantic and accessability requirements for common UI patterns. In general, *base* components implement [*roles*](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) from the ARIA specification. - -### Styled components -Styled components are implementations of the base components coupled with CSS styles to achieve visual design requirements. These can either be a simple styling layer over the *base* component, or components that extend *base* components with additional functionality or convenience features. These components tend to be more opinionated due the the nature of design implementation. - -### Class name contracts -Each base component implements a *class-name contract* - an enumeration and implementation of all classes used by the component. Simple components such as `Hyperlink` may only expose a single class name in the *class-name contract*. More complicated components such as `Breadcrumb` will have multiple class names and will apply them to the appropriate elements. For instance, the `Breadcrumb` component implements the following *class-name contract*: - -```typescript -interface BreadcrumbClassNameContract { - breadcrumb: string; // Applied to the root of the component - breadcrumb_item: string; // Applied to each breadcrumb item - breadcrumb_item__current: string; // Applied to the item representing the location in the breadcrumb - breadcrumb_itemsContainer: string; // Applied to the container of all the breadcrumb items - breadcrumb_separator: string; // Applied to the element representing the separator of the breadcrumb items -} -``` - -When the base component renders, it will apply classes to elements from the *class-name contract* properties of the `managedClasses` prop: - -```jsx -// Inside the Breadcrumb render function -
-
- /* ...etc */ -
-
-``` - -#### How are components styled? -Base components are styled using [JSS](https://cssinjs.org/?v=v10.0.0) - a tool for generating stylesheets from JavaScript objects. Each JSS stylesheet conforms the the class-name contract defined by the component. [@microsoft/fast-jss-manager-react](https://github.com/microsoft/fast/tree/master/packages/fast-jss-manager-react) is used to compose a component stylesheet with a base component, and will manage CSS creation, update, and removal processes during the component lifecycle. - -#### What is the design system? -The *design-system* is all of the design data - it captures design thinking into a configuration object that informs components how to render. This can include information about color, font-weights, UI density, motion, and more. In practice, this object is provided to JSS stylesheets so that the resulting CSS is a product of the *design-system*. diff --git a/docs/en/getting-started/utilities.md b/docs/en/getting-started/utilities.md deleted file mode 100644 index 10ef00c0f98..00000000000 --- a/docs/en/getting-started/utilities.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: utilities -title: Utilities -sidebar_label: Utilities ---- - -# Utilities -FAST has two utility libraries for common operations: -1. @microsoft/fast-web-utilities contains general-purpose JavaScript utilities -2. @microsoft/fast-jss-utilities are utilities intended to be used in JSS stylesheets \ No newline at end of file diff --git a/docs/readme.md b/docs/readme.md deleted file mode 100644 index c99ddff9280..00000000000 --- a/docs/readme.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: readme -title: FAST -sidebar_label: What is FAST ---- - -# FAST - -An unopinionated system of components, development tools, and utilities used à la carte or as a suite to build enterprise-grade websites and applications. - -## Key features & benefits - -### Unopinionated - -These days, there are a million and one great ways to build your next Web site or application. So, we have made being unopinionated the center of every decision made in FAST. - -This principle of being unopinionated manifests in several important ways including: - -* A flat component architecture that lets you compose what you need without struggling with rigid patterns and complex objects. -* Separating base components and style that supports multiple frameworks without re-writing or duplicating styles. This separation also lets you build your own styles, with your style technology of choice, without having to re-build or duplicate the base components. -* Framework agnostic tooling that lets you use our Development tools with any view framework. -* The ability to replace almost any FAST package with your package of choice. Get started with our animation or layout package and add more as you need them. Alternatively, use our suite of packages to build your next project from the ground up; it's your call. - -### UI development and style guide tools - -When developing components and views, excellent development tooling can make all the difference. FAST offers development and style guide tools that work with FAST components, components from other frameworks or your components. - -Try out component properties with an auto-generated props UI, get a live preview of the code based on any property’s configuration, preview RTL and themes, and preview component compositing with a transparency grid. - -Also, we built FAST development tools from re-usable packages so, if you have special needs, you can build your tools from the same shared libraries. - -### Bring your design system - -Widely available design systems from companies like Microsoft (Fluent), Google (Material), or Salesforce (Lightning) are useful when it is essential to align with a platform or take advantage of a polished system at low cost, but many companies have their design system of their own, and some may have multiple design systems or variations. - -Because FAST has abstracted based components from their style, you get a head start on your design system by building on top of tried and true base components and style libraries like our offerings for color, animation, and elevation. diff --git a/package.json b/package.json index 1b293ee3e8a..9a655db79eb 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,6 @@ "url": "https://github.com/Microsoft/fast/issues/new/choose" }, "scripts": { - "docs:build": "node build/documentation/generate-typedocs.js", - "docs:build:api": "node build/documentation/generate-typedocs.js", - "docs:build:dry-run": "node build/documentation/generate-typedocs.js --dry-run", - "docs:build:readme": "node build/documentation/copy-package-readme.js", - "docs:build:verbose": "node build/documentation/generate-typedocs.js --verbose", "integration-tests:alpha": "node build/testing/sauce-labs/test-browsers.js alpha", "integration-tests:beta": "node build/testing/sauce-labs/test-browsers.js beta", "integration-tests:release": "node build/testing/sauce-labs/test-browsers.js release", diff --git a/packages/README.md b/packages/README.md index 524997bc7ae..7aab2904f0f 100644 --- a/packages/README.md +++ b/packages/README.md @@ -4,5 +4,4 @@ FAST is organized as a monorepo and this is where you'll find the packages we pu * `web-components` - Packages that are directly related to web component technologies. This includes tech for building components, our components library, and our design system implementations. * `utilities` - General purpose packages useful in creating web apps and sites. This includes tech for colors, animation, linting, etc. -* `tooling` - Packages that contain design and prototyping tools. -* `react` - Legacy React components that predate the modern web component work. \ No newline at end of file +* `tooling` - Packages that contain design and prototyping tools. \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-base/.eslintignore b/packages/react/fast-components-class-name-contracts-base/.eslintignore deleted file mode 100644 index 2e62dfce300..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/.eslintignore +++ /dev/null @@ -1,6 +0,0 @@ -# don't ever lint node_modules -node_modules -# don't lint build output (make sure it's set to your correct build folder name) -dist -# don't lint coverage output -coverage diff --git a/packages/react/fast-components-class-name-contracts-base/.eslintrc.js b/packages/react/fast-components-class-name-contracts-base/.eslintrc.js deleted file mode 100644 index 8712625260a..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: ["@microsoft/eslint-config-fast-dna", "prettier"], -}; diff --git a/packages/react/fast-components-class-name-contracts-base/.npmignore b/packages/react/fast-components-class-name-contracts-base/.npmignore deleted file mode 100644 index b0ba0651f30..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/.npmignore +++ /dev/null @@ -1,5 +0,0 @@ -# Source files -src/ - -# Configs -tsconfig.json \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-base/.npmrc b/packages/react/fast-components-class-name-contracts-base/.npmrc deleted file mode 100644 index 43c97e719a5..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/packages/react/fast-components-class-name-contracts-base/.prettierignore b/packages/react/fast-components-class-name-contracts-base/.prettierignore deleted file mode 100644 index 521e20e203d..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -coverage/* -dist/* -www/* \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-base/CHANGELOG.md b/packages/react/fast-components-class-name-contracts-base/CHANGELOG.md deleted file mode 100644 index e882b05baa4..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/CHANGELOG.md +++ /dev/null @@ -1,499 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [4.8.0](https://github.com/microsoft/fast-react/compare/@microsoft/fast-components-class-name-contracts-base@4.7.3...@microsoft/fast-components-class-name-contracts-base@4.8.0) (2020-07-14) - - -### Bug Fixes - -* update repo URL to be the soon-to-be archived repo for React packages ([#3498](https://github.com/microsoft/fast-react/issues/3498)) ([693d7fd](https://github.com/microsoft/fast-react/commit/693d7fd70823fbc9cc13d502764dbef8faf27e6f)) - - -### Features - -* update typescript version and remove utility types dependencies for react packages ([#3422](https://github.com/microsoft/fast-react/issues/3422)) ([09d07b5](https://github.com/microsoft/fast-react/commit/09d07b580cda3bcc5d28f83d3568521f710c9576)) - - - - - -## [4.7.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.7.2...@microsoft/fast-components-class-name-contracts-base@4.7.3) (2020-06-26) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -## [4.7.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.7.1...@microsoft/fast-components-class-name-contracts-base@4.7.2) (2020-06-15) - - -### Bug Fixes - -* react datagrid - don't unnecessarily hardcode layout panel ([#3285](https://github.com/Microsoft/fast/issues/3285)) ([c3678f6](https://github.com/Microsoft/fast/commit/c3678f684c09145d194367153c6839280f33730a)) - - - - - -# [4.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.5...@microsoft/fast-components-class-name-contracts-base@4.7.0) (2020-06-05) - - -### Features - -* add data grid to base React component set ([#3158](https://github.com/Microsoft/fast/issues/3158)) ([d2e7ead](https://github.com/Microsoft/fast/commit/d2e7ead60e7973cead222843899829f879b67da0)) - - - - - -## [4.6.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.4...@microsoft/fast-components-class-name-contracts-base@4.6.5) (2020-05-18) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -## [4.6.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.3...@microsoft/fast-components-class-name-contracts-base@4.6.4) (2020-04-22) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -## [4.6.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.2...@microsoft/fast-components-class-name-contracts-base@4.6.3) (2020-04-10) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -## [4.6.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.1...@microsoft/fast-components-class-name-contracts-base@4.6.2) (2020-03-13) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -## [4.6.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.6.0...@microsoft/fast-components-class-name-contracts-base@4.6.1) (2020-02-07) - - -### Bug Fixes - -* select - add css class for scaleToFit mode ([#2626](https://github.com/Microsoft/fast/issues/2626)) ([15c7a50](https://github.com/Microsoft/fast/commit/15c7a50ef336e4531261ce1fe6be3695c9533243)) - - - - - -# [4.6.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.5.0...@microsoft/fast-components-class-name-contracts-base@4.6.0) (2019-12-23) - - -### Features - -* add tree view as a new component ([#2510](https://github.com/Microsoft/fast/issues/2510)) ([1a1d465](https://github.com/Microsoft/fast/commit/1a1d46566dc6c378a0f1981341a36dcb9897226f)) - - - - - -# [4.5.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.4.0...@microsoft/fast-components-class-name-contracts-base@4.5.0) (2019-11-07) - - -### Features - -* select class and style support for scaling menus ([#2397](https://github.com/Microsoft/fast/issues/2397)) ([d9b4c84](https://github.com/Microsoft/fast/commit/d9b4c841e38dcf837f0159cf9928cceda0bb9de8)) - - - - - -# [4.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.3.3...@microsoft/fast-components-class-name-contracts-base@4.4.0) (2019-10-16) - - -### Features - -* add viewport positioner to select menu ([#2263](https://github.com/Microsoft/fast/issues/2263)) ([af5f04a](https://github.com/Microsoft/fast/commit/af5f04a)) - - - - - -## [4.3.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.3.2...@microsoft/fast-components-class-name-contracts-base@4.3.3) (2019-09-10) - - -### Bug Fixes - -* Enable slider touch dragging ([#2213](https://github.com/Microsoft/fast/issues/2213)) ([70983fa](https://github.com/Microsoft/fast/commit/70983fa)) - - - - - -## [4.3.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.3.1...@microsoft/fast-components-class-name-contracts-base@4.3.2) (2019-09-05) - - -### Bug Fixes - -* improve slider thumb animations ([#2187](https://github.com/Microsoft/fast/issues/2187)) ([71ffcd8](https://github.com/Microsoft/fast/commit/71ffcd8)) - - - - - -## [4.3.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.3.0...@microsoft/fast-components-class-name-contracts-base@4.3.1) (2019-08-22) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -# [4.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.2.0...@microsoft/fast-components-class-name-contracts-base@4.3.0) (2019-06-25) - - -### Features - -* add new components for each button appearance style ([#1865](https://github.com/Microsoft/fast/issues/1865)) ([b64d29c](https://github.com/Microsoft/fast/commit/b64d29c)) - - - - - -# [4.2.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.1.1...@microsoft/fast-components-class-name-contracts-base@4.2.0) (2019-06-11) - - -### Features - -* add viewport positioner component ([#1781](https://github.com/Microsoft/fast/issues/1781)) ([a45dda6](https://github.com/Microsoft/fast/commit/a45dda6)) - - - - - -## [4.1.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.1.0...@microsoft/fast-components-class-name-contracts-base@4.1.1) (2019-05-31) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -# [4.1.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.0.1...@microsoft/fast-components-class-name-contracts-base@4.1.0) (2019-04-26) - - -### Features - -* add slider component ([#1676](https://github.com/Microsoft/fast/issues/1676)) ([6eded38](https://github.com/Microsoft/fast/commit/6eded38)) - - - - - -## [4.0.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@4.0.0...@microsoft/fast-components-class-name-contracts-base@4.0.1) (2019-04-09) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-base - - - - - -# [4.0.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.10.0...@microsoft/fast-components-class-name-contracts-base@4.0.0) (2019-03-25) - - -### Bug Fixes - -* update to use esModuleInterop in the TypeScript configuration files ([#1211](https://github.com/Microsoft/fast/issues/1211)) ([2ec0644](https://github.com/Microsoft/fast/commit/2ec0644)) - - -### BREAKING CHANGES - -* This will affect how imports will be handled by -consumers - - - - - -# [3.10.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.9.0...@microsoft/fast-components-class-name-contracts-base@3.10.0) (2019-03-19) - - -### Features - -* add auto suggest component ([#1551](https://github.com/Microsoft/fast/issues/1551)) ([660fc41](https://github.com/Microsoft/fast/commit/660fc41)) - - - - - -# [3.9.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.8.0...@microsoft/fast-components-class-name-contracts-base@3.9.0) (2019-03-11) - - -### Features - -* add base select component ([#1422](https://github.com/Microsoft/fast/issues/1422)) ([b77a25e](https://github.com/Microsoft/fast/commit/b77a25e)) - - - - - -# [3.8.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.7.0...@microsoft/fast-components-class-name-contracts-base@3.8.0) (2019-02-28) - - -### Bug Fixes - -* add additional wrapper to dialog to prevent subpixel aliasing due to css transforms ([#1431](https://github.com/Microsoft/fast/issues/1431)) ([1fad8fe](https://github.com/Microsoft/fast/commit/1fad8fe)) - - -### Features - -* add class name for horizontal overflow items ([#1448](https://github.com/Microsoft/fast/issues/1448)) ([ffb6d87](https://github.com/Microsoft/fast/commit/ffb6d87)) - - - - - -# [3.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.6.0...@microsoft/fast-components-class-name-contracts-base@3.7.0) (2019-02-21) - - -### Features - -* add additional functionality to listbox base ([#1381](https://github.com/Microsoft/fast/issues/1381)) ([48d9c31](https://github.com/Microsoft/fast/commit/48d9c31)) -* create number field as base and MSFT component ([#1371](https://github.com/Microsoft/fast/issues/1371)) ([d440b5f](https://github.com/Microsoft/fast/commit/d440b5f)) - - - - - -# [3.6.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.5.0...@microsoft/fast-components-class-name-contracts-base@3.6.0) (2019-02-07) - - -### Bug Fixes - -* child component class name assignment in tabs ([#1345](https://github.com/Microsoft/fast/issues/1345)) ([769aa2b](https://github.com/Microsoft/fast/commit/769aa2b)) - - -### Features - -* add badge as an MSFT component ([#1278](https://github.com/Microsoft/fast/issues/1278)) ([79ce26c](https://github.com/Microsoft/fast/commit/79ce26c)) -* add listbox base component ([#1304](https://github.com/Microsoft/fast/issues/1304)) ([0ad4cbe](https://github.com/Microsoft/fast/commit/0ad4cbe)) - - - - - -# [3.5.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.4.0...@microsoft/fast-components-class-name-contracts-base@3.5.0) (2019-01-15) - - -### Features - -* add text area as a new component ([#1267](https://github.com/Microsoft/fast/issues/1267)) ([0bdd43f](https://github.com/Microsoft/fast/commit/0bdd43f)) - - - - - -# [3.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.3.1...@microsoft/fast-components-class-name-contracts-base@3.4.0) (2018-12-31) - - -### Features - -* add support for render props to tabs ([#1199](https://github.com/Microsoft/fast/issues/1199)) ([19f482e](https://github.com/Microsoft/fast/commit/19f482e)) - - - - - - -## [3.3.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-base@3.3.0...@microsoft/fast-components-class-name-contracts-base@3.3.1) (2018-12-21) - - -### Bug Fixes - -* style cleanup and consolidation ([#1198](https://github.com/Microsoft/fast/issues/1198)) ([4151f39](https://github.com/Microsoft/fast/commit/4151f39)) - - - - - - -# 2.2.0 (2018-09-11) - - -### Features - -* add contrast based color system ([#810](https://github.com/Microsoft/fast/issues/810)) ([5ec457c](https://github.com/Microsoft/fast/commit/5ec457c)) -* **progress:** add progress component ([#835](https://github.com/Microsoft/fast/issues/835)) ([44d9bb1](https://github.com/Microsoft/fast/commit/44d9bb1)) - - - - -# 2.1.0 (2018-08-29) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **fast-components-react-base:** add tabs component ([#761](https://github.com/Microsoft/fast/issues/761)) ([24a5bb3](https://github.com/Microsoft/fast/commit/24a5bb3)) - - - - -# 2.0.0-corrected (2018-08-03) - - -### Bug Fixes - -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* add hypertext component ([#210](https://github.com/Microsoft/fast/issues/210)) ([9e363ff](https://github.com/Microsoft/fast/commit/9e363ff)) -* **checkbox:** update styling and incorrect states ([#371](https://github.com/Microsoft/fast/issues/371)) ([45cbe3c](https://github.com/Microsoft/fast/commit/45cbe3c)) -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* **checkbox:** add new component with styles ([#252](https://github.com/Microsoft/fast/issues/252)) ([3ad3988](https://github.com/Microsoft/fast/commit/3ad3988)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **dialog:** add dialog as a new component ([#752](https://github.com/Microsoft/fast/issues/752)) ([2864021](https://github.com/Microsoft/fast/commit/2864021)) -* **fast-components-react-base:** add horizontal overflow ([#739](https://github.com/Microsoft/fast/issues/739)) ([c6b0ebf](https://github.com/Microsoft/fast/commit/c6b0ebf)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) -* **label:** add new component and msft styles ([#265](https://github.com/Microsoft/fast/issues/265)) ([0328028](https://github.com/Microsoft/fast/commit/0328028)) - - - - - - -# [2.1.0](https://github.com/Microsoft/fast/compare/v2.0.0-corrected...v2.1.0) (2018-08-29) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **fast-components-react-base:** add tabs component ([#761](https://github.com/Microsoft/fast/issues/761)) ([24a5bb3](https://github.com/Microsoft/fast/commit/24a5bb3)) - - - - - - -# [2.0.0](https://github.com/Microsoft/fast/compare/v1.6.0...v2.0.0) (2018-08-02) - - -### Bug Fixes - -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **dialog:** add dialog as a new component ([#752](https://github.com/Microsoft/fast/issues/752)) ([2864021](https://github.com/Microsoft/fast/commit/2864021)) -* **fast-components-react-base:** add horizontal overflow ([#739](https://github.com/Microsoft/fast/issues/739)) ([c6b0ebf](https://github.com/Microsoft/fast/commit/c6b0ebf)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - - - - -# [1.9.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.9.0) (2018-07-14) - - -### Bug Fixes - -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - - - - -# [1.8.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.8.0) (2018-06-12) - - - - - -# [1.7.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.7.0) (2018-06-01) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) - - - - - -# [1.6.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.6.0) (2018-05-16) - - - - - -# [1.5.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.5.0) (2018-05-16) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# [1.4.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.4.0) (2018-05-14) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# 1.2.0 (2018-05-10) - - -### Features - -* **checkbox:** update styling and incorrect states ([#371](https://github.com/Microsoft/fast/issues/371)) ([45cbe3c](https://github.com/Microsoft/fast/commit/45cbe3c)) - - - - - -# 1.1.0 (2018-05-09) - - -### Bug Fixes - -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) - - -### Features - -* add hypertext component ([#210](https://github.com/Microsoft/fast/issues/210)) ([9e363ff](https://github.com/Microsoft/fast/commit/9e363ff)) -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* **checkbox:** add new component with styles ([#252](https://github.com/Microsoft/fast/issues/252)) ([3ad3988](https://github.com/Microsoft/fast/commit/3ad3988)) -* **label:** add new component and msft styles ([#265](https://github.com/Microsoft/fast/issues/265)) ([0328028](https://github.com/Microsoft/fast/commit/0328028)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) diff --git a/packages/react/fast-components-class-name-contracts-base/README.md b/packages/react/fast-components-class-name-contracts-base/README.md deleted file mode 100644 index 7437cd5091d..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# FAST Components class name contracts base - -This package provides the TypeScript typings for all FAST components class-name contracts. These contracts enable strict typing of JSS stylesheets and each component's expectation of which class-names will be made available (and under which keys those class-names reside) to the component at runtime. - -## A deeper dive - -FAST base components are built from the ground-up to work with CSS module implementations. This means that each HTML `class` attribute can be dynamic and unique. To facilitate working with any CSS module implementation, each component expects as a data the `class` attribute values when the component is instantiated. - -These contracts simply describe - as TypeScript interfaces - the key/value pairs that each component can expect to be able to use when retrieving these dynamic class-names. - -```tsx -inteface ButtonClassNameContract { - button: string; -} - -// In the button base-component, we use the class-name contract to inform which keys will available on the -// `managedClasses` object, which is where dynamic class-names get added as props to a component. -render(): JSX.Element { - return ( - - ); -} -``` - -## TypeScript only - -This package only contains TypeScript interfaces to be used by other packages - as such, it will get completely compiled out of your project during your build to JavaScript. If you're not using TypeScript, this package will have no effect on your codebase. \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-base/package.json b/packages/react/fast-components-class-name-contracts-base/package.json deleted file mode 100644 index ab7d12b2a1c..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "@microsoft/fast-components-class-name-contracts-base", - "description": "Type descriptions for the classnames that any given component can expect as props.", - "sideEffects": false, - "version": "4.8.0", - "author": { - "name": "Microsoft", - "url": "https://discord.gg/FcSNfg4" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/microsoft/fast-react.git" - }, - "bugs": { - "url": "https://github.com/Microsoft/fast/issues/new/choose" - }, - "main": "./dist/index.js", - "types": "./dist/index.d.ts", - "scripts": { - "build": "tsc -p ./tsconfig.build.json", - "clean:dist": "node ../../../build/clean.js dist", - "prepare": "yarn clean:dist && yarn build", - "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"", - "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different", - "test": "yarn eslint", - "eslint": "eslint . --ext .ts,.tsx", - "eslint:fix": "eslint . --ext .ts,.tsx --fix", - "watch": "yarn build -- -w --preserveWatchOutput" - }, - "devDependencies": { - "@microsoft/eslint-config-fast-dna": "^1.2.0", - "eslint-config-prettier": "^6.10.1", - "prettier": "2.0.2", - "typescript": "^3.9.0" - } -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/auto-suggest/index.ts b/packages/react/fast-components-class-name-contracts-base/src/auto-suggest/index.ts deleted file mode 100644 index a46b4be6606..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/auto-suggest/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * The class name contract for the auto suggest component - */ -export interface AutoSuggestClassNameContract { - /** - * The root of the auto suggest component - */ - autoSuggest?: string; - - /** - * The disabled modifier - */ - autoSuggest__disabled?: string; - - /** - * The menu of the auto suggest component - */ - autoSuggest_menu?: string; - - /** - * The menu open modifier - */ - autoSuggest__menuOpen?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/badge/index.ts b/packages/react/fast-components-class-name-contracts-base/src/badge/index.ts deleted file mode 100644 index c1901eca4cc..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/badge/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * The class name contract for the badge component - */ -export interface BadgeClassNameContract { - badge?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/breadcrumb/index.ts b/packages/react/fast-components-class-name-contracts-base/src/breadcrumb/index.ts deleted file mode 100644 index c81f3f50236..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/breadcrumb/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * The class name contract for the breadcrumb component - */ -export interface BreadcrumbClassNameContract { - breadcrumb?: string; - breadcrumb_item?: string; - breadcrumb_item__current?: string; - breadcrumb_itemsContainer?: string; - breadcrumb_separator?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/button/index.ts b/packages/react/fast-components-class-name-contracts-base/src/button/index.ts deleted file mode 100644 index b7e003375f3..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/button/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * The class name contract for the button component - */ -export interface ButtonClassNameContract { - /** - * The root of the button component - */ - button?: string; - - /** - * The disabled modifier - */ - button__disabled?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/card/index.ts b/packages/react/fast-components-class-name-contracts-base/src/card/index.ts deleted file mode 100644 index ea94ae44e3a..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/card/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * The class name contract for the card component - */ -export interface CardClassNameContract { - card?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/checkbox/index.ts b/packages/react/fast-components-class-name-contracts-base/src/checkbox/index.ts deleted file mode 100644 index 0588e888b5a..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/checkbox/index.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * The class name contract for the checkbox component - */ -export interface CheckboxClassNameContract { - /** - * The root of the checkbox component - */ - checkbox?: string; - - /** - * The checkbox input element - */ - checkbox_input?: string; - - /** - * The label associated with the checkbox - */ - checkbox_label?: string; - - /** - * The checkbox state indicator - */ - checkbox_stateIndicator?: string; - - /** - * The disabled state modifier - */ - checkbox__disabled?: string; - - /** - * The checked state modifier - */ - checkbox__checked?: string; - - /** - * The indeterminate state modifer - */ - checkbox__indeterminate?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/context-menu-item/index.ts b/packages/react/fast-components-class-name-contracts-base/src/context-menu-item/index.ts deleted file mode 100644 index ea4e1faec54..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/context-menu-item/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the context-menu-item component - */ -export interface ContextMenuItemClassNameContract { - contextMenuItem?: string; - contextMenuItem__checkbox?: string; - contextMenuItem__radio?: string; - contextMenuItem__disabled?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/context-menu/index.ts b/packages/react/fast-components-class-name-contracts-base/src/context-menu/index.ts deleted file mode 100644 index 18f1b1df0fa..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/context-menu/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * The class name contract for the context-menu component - */ -export interface ContextMenuClassNameContract { - contextMenu?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/data-grid/index.ts b/packages/react/fast-components-class-name-contracts-base/src/data-grid/index.ts deleted file mode 100644 index 0b981da3631..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/data-grid/index.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * The class name contract for the data grid component - */ -export interface DataGridClassNameContract { - /** - * The root of the data grid component - */ - dataGrid?: string; - - /** - * Applied if the datagrid virtualize prop is true - */ - dataGrid__virtualized?: string; - - /** - * The scrolling container - */ - dataGrid_scrollingPanel?: string; - - /** - * the container that contains the data grid rows - */ - dataGrid_scrollingPanelItems?: string; - - /** - * Applied if the scrolling panel has enough items to be scrollable - */ - dataGrid_scrollingPanel__scrollable?: string; - - /** - * The header of the data grid component - */ - dataGrid_header?: string; - - /** - * The column header of the data grid component - */ - dataGrid_columnHeader?: string; - - /** - * The rows of the data grid component - */ - dataGrid_row?: string; - - /** - * Applied when focus is in a particular row - */ - dataGrid_row__focusedWithin?: string; - - /** - * A cell within the data grid component - */ - dataGrid_cell?: string; -} - -export interface DataGridRowClassNameContract { - dataGridRow?: string; - dataGridRow__focusedWithin?: string; - dataGridRow_cell?: string; -} - -export interface DataGridCellClassNameContract { - dataGridCell?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/dialog/index.ts b/packages/react/fast-components-class-name-contracts-base/src/dialog/index.ts deleted file mode 100644 index e06ed8556d4..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/dialog/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * The class name contract for the dialog component - */ -export interface DialogClassNameContract { - /** - * The root of the dialog component - */ - dialog?: string; - - /** - * The positioning region for the dialog - */ - dialog_positioningRegion?: string; - - /** - * The element that overlays the page while the modal is visible - */ - dialog_modalOverlay?: string; - - /** - * The dialog content region - */ - dialog_contentRegion?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/divider/index.ts b/packages/react/fast-components-class-name-contracts-base/src/divider/index.ts deleted file mode 100644 index 573373349c1..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/divider/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the divider component - */ -export interface DividerClassNameContract { - /** - * The root of the divider component - */ - divider?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/horizontal-overflow/index.ts b/packages/react/fast-components-class-name-contracts-base/src/horizontal-overflow/index.ts deleted file mode 100644 index fc35667486f..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/horizontal-overflow/index.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * The class name contract for the horizontal overflow component - */ -export interface HorizontalOverflowClassNameContract { - /** - * The root of the horizontal overflow component - */ - horizontalOverflow?: string; - - /** - * The overflow items container - */ - horizontalOverflow_contentRegion?: string; - - /** - * The overflow item(s) - */ - horizontalOverflow_item?: string; - - /** - * The next scroll control - */ - horizontalOverflow_next?: string; - - /** - * The previous scroll control - */ - horizontalOverflow_previous?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/hypertext/index.ts b/packages/react/fast-components-class-name-contracts-base/src/hypertext/index.ts deleted file mode 100644 index 7432550ef17..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/hypertext/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the hypertext component - */ -export interface HypertextClassNameContract { - /** - * The root of the hypertext component - */ - hypertext?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/image/index.ts b/packages/react/fast-components-class-name-contracts-base/src/image/index.ts deleted file mode 100644 index 6a1f7505bf8..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/image/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * The class name contract for the image component - */ -export interface ImageClassNameContract { - /** - * The root of the image component - */ - image?: string; - - /** - * The picture element image modifier - */ - image__picture?: string; - - /** - * The img element within the picture element - */ - image_img?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/index.ts b/packages/react/fast-components-class-name-contracts-base/src/index.ts deleted file mode 100644 index 6b751ff49ed..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -export * from "./auto-suggest"; -export * from "./badge"; -export * from "./breadcrumb"; -export * from "./button"; -export * from "./card"; -export * from "./checkbox"; -export * from "./context-menu"; -export * from "./context-menu-item"; -export * from "./data-grid"; -export * from "./dialog"; -export * from "./divider"; -export * from "./horizontal-overflow"; -export * from "./hypertext"; -export * from "./image"; -export * from "./label"; -export * from "./listbox"; -export * from "./listbox-item"; -export * from "./number-field"; -export * from "./managed-classes"; -export * from "./progress"; -export * from "./radio"; -export * from "./select"; -export * from "./slider"; -export * from "./slider-track-item"; -export * from "./stack-panel"; -export * from "./tabs"; -export * from "./text-area"; -export * from "./text-field"; -export * from "./toggle"; -export * from "./tree-view"; -export * from "./tree-view-item"; -export * from "./typography"; -export * from "./viewport-positioner"; diff --git a/packages/react/fast-components-class-name-contracts-base/src/label/index.ts b/packages/react/fast-components-class-name-contracts-base/src/label/index.ts deleted file mode 100644 index c046f1b55ea..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/label/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * The class name contract for the label component - */ -export interface LabelClassNameContract { - /** - * The root of the label component - */ - label?: string; - - /** - * The hidden from assistive technologies modifier - */ - label__hidden?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/listbox-item/index.ts b/packages/react/fast-components-class-name-contracts-base/src/listbox-item/index.ts deleted file mode 100644 index aebd3b875e6..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/listbox-item/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * The class name contract for the listbox-item component - */ -export interface ListboxItemClassNameContract { - /** - * The root of the listbox-item component - */ - listboxItem?: string; - - /** - * The disabled modifier - */ - listboxItem__disabled?: string; - - /** - * The selected modifier - */ - listboxItem__selected?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/listbox/index.ts b/packages/react/fast-components-class-name-contracts-base/src/listbox/index.ts deleted file mode 100644 index 8fd1cdc19b4..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/listbox/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * The class name contract for the listbox component - */ -export interface ListboxClassNameContract { - /** - * The root of the listbox component - */ - listbox?: string; - - /** - * The disabled modifier - */ - listbox__disabled?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/managed-classes.ts b/packages/react/fast-components-class-name-contracts-base/src/managed-classes.ts deleted file mode 100644 index 69ae022c7b9..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/managed-classes.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * The interface for class names passed as props - * - * Allows any string to be used in addition to class names - * intended to support the use of Nested at-rules: - * https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule - * - * Note: If TypeScript updated to use RegExp this can be improved - * to more strictly check for Nested at-rules: - * https://github.com/Microsoft/TypeScript/issues/6579 - */ -export interface ManagedClasses { - managedClasses?: { [className in keyof T]?: string }; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/number-field/index.ts b/packages/react/fast-components-class-name-contracts-base/src/number-field/index.ts deleted file mode 100644 index e678b96eee5..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/number-field/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the number field component - */ -export interface NumberFieldClassNameContract { - /** - * The root of the number field component - */ - numberField?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/progress/index.ts b/packages/react/fast-components-class-name-contracts-base/src/progress/index.ts deleted file mode 100644 index d3dacc4f429..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/progress/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the progress component - */ -export interface ProgressClassNameContract { - /** - * The root of the progress component - */ - progress?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/radio/index.ts b/packages/react/fast-components-class-name-contracts-base/src/radio/index.ts deleted file mode 100644 index fc6db957634..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/radio/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * The class name contract for the radio component - */ -export interface RadioClassNameContract { - radio?: string; - radio_input?: string; - radio_label?: string; - radio_stateIndicator?: string; - radio__disabled?: string; - radio__checked?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/select/index.ts b/packages/react/fast-components-class-name-contracts-base/src/select/index.ts deleted file mode 100644 index d97cb0eb05e..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/select/index.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - * The class name contract for the select component - */ -export interface SelectClassNameContract { - /** - * The root of the select component - */ - select?: string; - - /** - * The disabled modifier - */ - select__disabled?: string; - - /** - * If the component is in "scale to fit" mode - */ - select__scaleToFit?: string; - - /** - * The menu of the select component - */ - select_menu?: string; - - /** - * The menu open modifier - */ - select_menu__open?: string; - - /** - * The multi select modifier - */ - select__multiSelectable?: string; - - /** - * select menu positioning wrapper - */ - select__menuPositioningRegion?: string; - - /** - * left positioner horizontal state - */ - select__menuPositionLeft?: string; - - /** - * right positioner horizontal state - */ - select__menuPositionRight?: string; - - /** - * top positioner vertical state - */ - select__menuPositionTop?: string; - - /** - * bottom positioner vertical state - */ - select__menuPositionBottom?: string; - - /** - * horizontal flip inward state - */ - select__menuPositionHorizontalInset?: string; - - /** - * vertical flip inward state - */ - select__menuPositionVerticalInset?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/slider-track-item/index.ts b/packages/react/fast-components-class-name-contracts-base/src/slider-track-item/index.ts deleted file mode 100644 index bb3448f4f86..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/slider-track-item/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * The class name contract for the slider track item component - */ -export interface SliderTrackItemClassNameContract { - /** - * The root of the slider component - */ - sliderTrackItem?: string; - - /** - * The horizontal orientation modifier - */ - sliderTrackItem_horizontal?: string; - - /** - * The vertical orientation modifier - */ - sliderTrackItem_vertical?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/slider/index.ts b/packages/react/fast-components-class-name-contracts-base/src/slider/index.ts deleted file mode 100644 index 63dd549bd38..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/slider/index.ts +++ /dev/null @@ -1,98 +0,0 @@ -/** - * The class name contract for the slider component - */ -export interface SliderClassNameContract { - /** - * The root of the slider component - */ - slider?: string; - - /** - * The layout region of the slider component. Slider children end up in this container. - */ - slider_layoutRegion?: string; - - /** - * The fixed background track of the slider component - * which determines click region and extent of the slider - */ - slider_track?: string; - - /** - * The cosmetic background track of the slider component - */ - slider_backgroundTrack?: string; - - /** - * The cosmetic foreground bar of the slider component that tracks the thumb - */ - slider_foregroundTrack?: string; - - /** - * The horizontal orientation modifier - */ - slider__horizontal?: string; - - /** - * The vertical orientation modifier - */ - slider__vertical?: string; - - /** - * The base thumb class - */ - slider_thumb?: string; - - /** - * The thumb vertical orientation modifier - */ - slider_thumb__vertical?: string; - - /** - * The thumb horizontal orientation modifier - */ - slider_thumb__horizontal?: string; - - /** - * The high value thumb - */ - slider_thumb__upperValue?: string; - - /** - * The low value thumb - */ - slider_thumb__lowerValue?: string; - - /** - * The disabled modifier - */ - slider__disabled?: string; - - /** - * The dragging modifier - */ - slider__dragging?: string; - - /** - * The touch dragging modifier - */ - slider__touchDragging?: string; - - /** - * The incrmenting modifier - */ - slider__incrementing?: string; - - /** - * rtl modifier - */ - slider__rtl?: string; - - /** - * mode modifiers - */ - slider__modeSingle?: string; - slider__modeAdjustLower?: string; - slider__modeAdjustUpper?: string; - slider__modeAdjustBoth?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/stack-panel/index.ts b/packages/react/fast-components-class-name-contracts-base/src/stack-panel/index.ts deleted file mode 100644 index 3ac972e95e3..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/stack-panel/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * The class name contract for the stackpanel component - */ -export interface StackPanelClassNameContract { - /** - * The root of the stackpanel component - */ - stackPanel?: string; - - /** - * the container that contains the stack panel items - */ - stackPanel_items?: string; - - /** - * Applied if the stack panel is scrollable - */ - stackPanel__scrollable?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/tabs/index.ts b/packages/react/fast-components-class-name-contracts-base/src/tabs/index.ts deleted file mode 100644 index c275e4f3666..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/tabs/index.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * The class name contract for the tabs component - */ -export interface TabsClassNameContract - extends TabClassNameContract, - TabPanelClassNameContract { - /** - * The root of the tabs component - */ - tabs?: string; - - /** - * The tab panels - */ - tabs_tabPanels?: string; - - /** - * The tab list - */ - tabs_tabList?: string; - - /** - * The content that renders in the tab - */ - tabs_tabContent?: string; - - /** - * The content that renders in the tab panel - */ - tabs_tabPanelContent?: string; -} - -export interface TabClassNameContract { - /** - * The root of the tab components - */ - tab?: string; - - /** - * The active tab modifier - */ - tab__active?: string; -} - -export interface TabPanelClassNameContract { - /** - * The root of the tab panel component - */ - tabPanel?: string; - - /** - * The hidden tab panel modifier - */ - tabPanel__hidden?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/text-area/index.ts b/packages/react/fast-components-class-name-contracts-base/src/text-area/index.ts deleted file mode 100644 index 94389cd2c27..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/text-area/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the text area component - */ -export interface TextAreaClassNameContract { - /** - * The root of the text area - */ - textArea?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/text-field/index.ts b/packages/react/fast-components-class-name-contracts-base/src/text-field/index.ts deleted file mode 100644 index 20d3ac32a68..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/text-field/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the textfield component - */ -export interface TextFieldClassNameContract { - /** - * The root of the text field - */ - textField?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/toggle/index.ts b/packages/react/fast-components-class-name-contracts-base/src/toggle/index.ts deleted file mode 100644 index 3134ca00851..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/toggle/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * The class name contract for the toggle component - */ -export interface ToggleClassNameContract { - /** - * The root of the toggle component - */ - toggle?: string; - - /** - * The toggle label - */ - toggle_label?: string; - - /** - * The toggle button - */ - toggle_toggleButton?: string; - - /** - * The toggle input element - */ - toggle_input?: string; - - /** - * The toggle state indicator - */ - toggle_stateIndicator?: string; - - /** - * The label indicating state - */ - toggle_statusMessage?: string; - - /** - * Applied when the toggle is disabled - */ - toggle__disabled?: string; - - /** - * Applied when the toggle is checked - */ - toggle__checked?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/tree-view-item/index.ts b/packages/react/fast-components-class-name-contracts-base/src/tree-view-item/index.ts deleted file mode 100644 index 5b2f4dd655a..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/tree-view-item/index.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * The class name contract for the tree view item component - */ -export interface TreeViewItemClassNameContract { - /** - * The root of the tree view item component - */ - treeViewItem?: string; - - /** - * The content region for the tree view item - */ - treeViewItem_contentRegion?: string; - - /** - * The inner content region for the tree view item - */ - treeViewItem_innerContentRegion?: string; - - /** - * The tree view item expand/collapse button - */ - treeViewItem_expandCollapseButton?: string; - - /** - * The tree view item expand/collapse glyph - */ - treeViewItem_expandCollapseGlyph?: string; - - /** - * The tree view item child node region - */ - treeViewItem_childNodeRegion?: string; - - /** - * The expanded modifier for the tree view item - */ - treeViewItem__expanded?: string; - - /** - * The selected modifier for the tree view item - */ - treeViewItem__selected?: string; - - /** - * The nested modifier for the tree view item - */ - treeViewItem__nested?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/tree-view/index.ts b/packages/react/fast-components-class-name-contracts-base/src/tree-view/index.ts deleted file mode 100644 index 51971455165..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/tree-view/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the tree view component - */ -export interface TreeViewClassNameContract { - /** - * The root of the tree view component - */ - treeView: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/typography/index.ts b/packages/react/fast-components-class-name-contracts-base/src/typography/index.ts deleted file mode 100644 index a35adc03576..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/typography/index.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * The class name contract for the typography component - */ -export interface TypographyClassNameContract { - /** - * The root of the typography component - */ - typography?: string; - - /** - * The type ramp 1 modifier - */ - typography__1?: string; - - /** - * The type ramp 2 modifier - */ - typography__2?: string; - - /** - * The type ramp 3 modifier - */ - typography__3?: string; - - /** - * The type ramp 4 modifier - */ - typography__4?: string; - - /** - * The type ramp 5 modifier - */ - typography__5?: string; - - /** - * The type ramp 6 modifier - */ - typography__6?: string; - - /** - * The type ramp 7 modifier - */ - typography__7?: string; - - /** - * The type ramp 8 modifier - */ - typography__8?: string; - - /** - * The type ramp 9 modifier - */ - typography__9?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/src/viewport-positioner/index.ts b/packages/react/fast-components-class-name-contracts-base/src/viewport-positioner/index.ts deleted file mode 100644 index 194d9812180..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/src/viewport-positioner/index.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * The class name contract for the viewport positioner component - */ -export interface ViewportPositionerClassNameContract { - /** - * The root of the viewport positioner component - */ - viewportPositioner?: string; - - /** - * left positioner horizontal state - */ - viewportPositioner__left?: string; - - /** - * right positioner horizontal state - */ - viewportPositioner__right?: string; - - /** - * top positioner vertical state - */ - viewportPositioner__top?: string; - - /** - * bottom positioner vertical state - */ - viewportPositioner__bottom?: string; - - /** - * horizontal flip inward state - */ - viewportPositioner__horizontalInset?: string; - - /** - * vertical flip inward state - */ - viewportPositioner__verticalInset?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-base/tsconfig.build.json b/packages/react/fast-components-class-name-contracts-base/tsconfig.build.json deleted file mode 100644 index afac3a95dda..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/tsconfig.build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": [ - "src/**/*" - ], - "exclude": [ - "**/*.spec.ts" - ] -} diff --git a/packages/react/fast-components-class-name-contracts-base/tsconfig.json b/packages/react/fast-components-class-name-contracts-base/tsconfig.json deleted file mode 100644 index 0446e02be86..00000000000 --- a/packages/react/fast-components-class-name-contracts-base/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "outDir": "./dist" - } -} diff --git a/packages/react/fast-components-class-name-contracts-msft/.eslintignore b/packages/react/fast-components-class-name-contracts-msft/.eslintignore deleted file mode 100644 index 2e62dfce300..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/.eslintignore +++ /dev/null @@ -1,6 +0,0 @@ -# don't ever lint node_modules -node_modules -# don't lint build output (make sure it's set to your correct build folder name) -dist -# don't lint coverage output -coverage diff --git a/packages/react/fast-components-class-name-contracts-msft/.eslintrc.js b/packages/react/fast-components-class-name-contracts-msft/.eslintrc.js deleted file mode 100644 index 8712625260a..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: ["@microsoft/eslint-config-fast-dna", "prettier"], -}; diff --git a/packages/react/fast-components-class-name-contracts-msft/.npmignore b/packages/react/fast-components-class-name-contracts-msft/.npmignore deleted file mode 100644 index b0ba0651f30..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/.npmignore +++ /dev/null @@ -1,5 +0,0 @@ -# Source files -src/ - -# Configs -tsconfig.json \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-msft/.npmrc b/packages/react/fast-components-class-name-contracts-msft/.npmrc deleted file mode 100644 index 43c97e719a5..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/packages/react/fast-components-class-name-contracts-msft/.prettierignore b/packages/react/fast-components-class-name-contracts-msft/.prettierignore deleted file mode 100644 index 521e20e203d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -coverage/* -dist/* -www/* \ No newline at end of file diff --git a/packages/react/fast-components-class-name-contracts-msft/CHANGELOG.md b/packages/react/fast-components-class-name-contracts-msft/CHANGELOG.md deleted file mode 100644 index 30c2eee0120..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/CHANGELOG.md +++ /dev/null @@ -1,591 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [4.9.0](https://github.com/microsoft/fast-react/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.9...@microsoft/fast-components-class-name-contracts-msft@4.9.0) (2020-07-14) - - -### Bug Fixes - -* update repo URL to be the soon-to-be archived repo for React packages ([#3498](https://github.com/microsoft/fast-react/issues/3498)) ([693d7fd](https://github.com/microsoft/fast-react/commit/693d7fd70823fbc9cc13d502764dbef8faf27e6f)) - - -### Features - -* update typescript version and remove utility types dependencies for react packages ([#3422](https://github.com/microsoft/fast-react/issues/3422)) ([09d07b5](https://github.com/microsoft/fast-react/commit/09d07b580cda3bcc5d28f83d3568521f710c9576)) - - - - - -## [4.8.9](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.8...@microsoft/fast-components-class-name-contracts-msft@4.8.9) (2020-06-26) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.8](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.7...@microsoft/fast-components-class-name-contracts-msft@4.8.8) (2020-06-15) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.5...@microsoft/fast-components-class-name-contracts-msft@4.8.6) (2020-06-05) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.4...@microsoft/fast-components-class-name-contracts-msft@4.8.5) (2020-05-18) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.3...@microsoft/fast-components-class-name-contracts-msft@4.8.4) (2020-04-22) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.2...@microsoft/fast-components-class-name-contracts-msft@4.8.3) (2020-04-10) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.1...@microsoft/fast-components-class-name-contracts-msft@4.8.2) (2020-03-13) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.8.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.8.0...@microsoft/fast-components-class-name-contracts-msft@4.8.1) (2020-02-07) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -# [4.8.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.8...@microsoft/fast-components-class-name-contracts-msft@4.8.0) (2019-12-23) - - -### Features - -* add tree view as a new component ([#2510](https://github.com/Microsoft/fast/issues/2510)) ([1a1d465](https://github.com/Microsoft/fast/commit/1a1d46566dc6c378a0f1981341a36dcb9897226f)) - - - - - -## [4.7.8](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.7...@microsoft/fast-components-class-name-contracts-msft@4.7.8) (2019-12-11) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.7.7](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.6...@microsoft/fast-components-class-name-contracts-msft@4.7.7) (2019-11-07) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.7.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.5...@microsoft/fast-components-class-name-contracts-msft@4.7.6) (2019-10-24) - - -### Bug Fixes - -* refactor action toggle ([#2333](https://github.com/Microsoft/fast/issues/2333)) ([2bef0fa](https://github.com/Microsoft/fast/commit/2bef0fab1ed3ef2936952a79e8ba2cc5f67006c2)) - - - - - -## [4.7.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.4...@microsoft/fast-components-class-name-contracts-msft@4.7.5) (2019-10-16) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.7.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.3...@microsoft/fast-components-class-name-contracts-msft@4.7.4) (2019-09-10) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.7.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.2...@microsoft/fast-components-class-name-contracts-msft@4.7.3) (2019-09-05) - - -### Bug Fixes - -* add paused state to progress ([#2197](https://github.com/Microsoft/fast/issues/2197)) ([f08b28e](https://github.com/Microsoft/fast/commit/f08b28e)) - - - - - -## [4.7.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.1...@microsoft/fast-components-class-name-contracts-msft@4.7.2) (2019-08-22) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.7.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.7.0...@microsoft/fast-components-class-name-contracts-msft@4.7.1) (2019-08-16) - - -### Bug Fixes - -* enumerate select option glyph in classname contract ([#2135](https://github.com/Microsoft/fast/issues/2135)) ([37c8762](https://github.com/Microsoft/fast/commit/37c8762)) - - - - - -# [4.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.6.0...@microsoft/fast-components-class-name-contracts-msft@4.7.0) (2019-07-31) - - -### Features - -* add support for size 7 heading and subheading ([#2061](https://github.com/Microsoft/fast/issues/2061)) ([ed950fb](https://github.com/Microsoft/fast/commit/ed950fb)) - - - - - -# [4.6.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.5.0...@microsoft/fast-components-class-name-contracts-msft@4.6.0) (2019-07-24) - - -### Features - -* add circular progress component ([#1998](https://github.com/Microsoft/fast/issues/1998)) ([fda7061](https://github.com/Microsoft/fast/commit/fda7061)) - - - - - -# [4.5.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.4.0...@microsoft/fast-components-class-name-contracts-msft@4.5.0) (2019-07-23) - - -### Features - -* add flyout as a new component ([#1940](https://github.com/Microsoft/fast/issues/1940)) ([b9ad765](https://github.com/Microsoft/fast/commit/b9ad765)) - - - - - -# [4.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.3.2...@microsoft/fast-components-class-name-contracts-msft@4.4.0) (2019-06-25) - - -### Features - -* add classname to MSFT button for when either before or after content and children exist ([#1877](https://github.com/Microsoft/fast/issues/1877)) ([dae29d6](https://github.com/Microsoft/fast/commit/dae29d6)) -* add new components for each button appearance style ([#1865](https://github.com/Microsoft/fast/issues/1865)) ([b64d29c](https://github.com/Microsoft/fast/commit/b64d29c)) - - - - - -## [4.3.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.3.1...@microsoft/fast-components-class-name-contracts-msft@4.3.2) (2019-06-11) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -## [4.3.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.3.0...@microsoft/fast-components-class-name-contracts-msft@4.3.1) (2019-06-05) - - -### Bug Fixes - -* remove margin on glyph when there is no label ([#1757](https://github.com/Microsoft/fast/issues/1757)) ([4179abf](https://github.com/Microsoft/fast/commit/4179abf)) - - - - - -# [4.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.2.2...@microsoft/fast-components-class-name-contracts-msft@4.3.0) (2019-05-31) - - -### Features - -* update the text input components to add 'filled' appearance ([#1782](https://github.com/Microsoft/fast/issues/1782)) ([2249848](https://github.com/Microsoft/fast/commit/2249848)) - - - - - -## [4.2.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.2.1...@microsoft/fast-components-class-name-contracts-msft@4.2.2) (2019-05-17) - - -### Bug Fixes - -* base select trigger on input field styles and not button styles ([#1716](https://github.com/Microsoft/fast/issues/1716)) ([07aeb2b](https://github.com/Microsoft/fast/commit/07aeb2b)) - - - - - -## [4.2.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.2.0...@microsoft/fast-components-class-name-contracts-msft@4.2.1) (2019-05-08) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -# [4.2.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.1.0...@microsoft/fast-components-class-name-contracts-msft@4.2.0) (2019-04-26) - - -### Features - -* add slider component ([#1676](https://github.com/Microsoft/fast/issues/1676)) ([6eded38](https://github.com/Microsoft/fast/commit/6eded38)) - - - - - -# [4.1.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.0.1...@microsoft/fast-components-class-name-contracts-msft@4.1.0) (2019-04-11) - - -### Features - -* add stealth appearance to button appearance enum ([#1616](https://github.com/Microsoft/fast/issues/1616)) ([771b651](https://github.com/Microsoft/fast/commit/771b651)) - - - - - -## [4.0.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@4.0.0...@microsoft/fast-components-class-name-contracts-msft@4.0.1) (2019-04-09) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -# [4.0.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.9.0...@microsoft/fast-components-class-name-contracts-msft@4.0.0) (2019-03-25) - - -### Bug Fixes - -* update to use esModuleInterop in the TypeScript configuration files ([#1211](https://github.com/Microsoft/fast/issues/1211)) ([2ec0644](https://github.com/Microsoft/fast/commit/2ec0644)) - - -### Features - -* remove appearance prop and add filled prop to control backplate usage ([#1485](https://github.com/Microsoft/fast/issues/1485)) ([87515ac](https://github.com/Microsoft/fast/commit/87515ac)) -* update action toggle to be styled based off appearance rather than selected state ([#1451](https://github.com/Microsoft/fast/issues/1451)) ([b598457](https://github.com/Microsoft/fast/commit/b598457)) - - -### BREAKING CHANGES - -* removes appearance property for badge in favor of filled property -* This will affect how imports will be handled by -consumers - - - - - -# [3.9.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.8.0...@microsoft/fast-components-class-name-contracts-msft@3.9.0) (2019-03-19) - - -### Features - -* add auto suggest component ([#1551](https://github.com/Microsoft/fast/issues/1551)) ([660fc41](https://github.com/Microsoft/fast/commit/660fc41)) - - - - - -# [3.8.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.7.0...@microsoft/fast-components-class-name-contracts-msft@3.8.0) (2019-03-11) - - -### Features - -* add base select component ([#1422](https://github.com/Microsoft/fast/issues/1422)) ([b77a25e](https://github.com/Microsoft/fast/commit/b77a25e)) - - - - - -# [3.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.6.0...@microsoft/fast-components-class-name-contracts-msft@3.7.0) (2019-03-01) - - -### Features - -* update carousel functionality and design ([#1411](https://github.com/Microsoft/fast/issues/1411)) ([fce4723](https://github.com/Microsoft/fast/commit/fce4723)) - - - - - -# [3.6.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.5.1...@microsoft/fast-components-class-name-contracts-msft@3.6.0) (2019-02-28) - - -### Features - -* add pivot msft component ([#1385](https://github.com/Microsoft/fast/issues/1385)) ([e81f01c](https://github.com/Microsoft/fast/commit/e81f01c)) - - - - - -## [3.5.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.5.0...@microsoft/fast-components-class-name-contracts-msft@3.5.1) (2019-02-21) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - -# [3.5.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.4.0...@microsoft/fast-components-class-name-contracts-msft@3.5.0) (2019-02-07) - - -### Features - -* add badge as an MSFT component ([#1278](https://github.com/Microsoft/fast/issues/1278)) ([79ce26c](https://github.com/Microsoft/fast/commit/79ce26c)) -* add carousel as a MSFT component ([#1338](https://github.com/Microsoft/fast/issues/1338)) ([b23e2c1](https://github.com/Microsoft/fast/commit/b23e2c1)) - - - - - -# [3.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.3.0...@microsoft/fast-components-class-name-contracts-msft@3.4.0) (2019-01-15) - - -### Features - -* add action toggle component ([#1257](https://github.com/Microsoft/fast/issues/1257)) ([d93508e](https://github.com/Microsoft/fast/commit/d93508e)) -* add render props for before and after slots in button ([#1266](https://github.com/Microsoft/fast/issues/1266)) ([e4ecc12](https://github.com/Microsoft/fast/commit/e4ecc12)) - - - - - -# [3.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.2.1...@microsoft/fast-components-class-name-contracts-msft@3.3.0) (2018-12-31) - - -### Features - -* add text action as a component ([#1208](https://github.com/Microsoft/fast/issues/1208)) ([d7a7686](https://github.com/Microsoft/fast/commit/d7a7686)) - - - - - - -## [3.2.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@3.2.0...@microsoft/fast-components-class-name-contracts-msft@3.2.1) (2018-12-21) - -**Note:** Version bump only for package @microsoft/fast-components-class-name-contracts-msft - - - - - - -# [2.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-class-name-contracts-msft@2.2.0...@microsoft/fast-components-class-name-contracts-msft@2.3.0) (2018-09-19) - - -### Features - -* **call-to-action:** add call to action component ([#851](https://github.com/Microsoft/fast/issues/851)) ([05fe0c2](https://github.com/Microsoft/fast/commit/05fe0c2)) - - - - - - -# 2.2.0 (2018-09-11) - - -### Features - -* add contrast based color system ([#810](https://github.com/Microsoft/fast/issues/810)) ([5ec457c](https://github.com/Microsoft/fast/commit/5ec457c)) -* **caption:** add caption component ([#829](https://github.com/Microsoft/fast/issues/829)) ([026cc4e](https://github.com/Microsoft/fast/commit/026cc4e)) -* **metatext:** add metatext as a new MSFT component ([#818](https://github.com/Microsoft/fast/issues/818)) ([8498687](https://github.com/Microsoft/fast/commit/8498687)) -* **progress:** add progress component ([#835](https://github.com/Microsoft/fast/issues/835)) ([44d9bb1](https://github.com/Microsoft/fast/commit/44d9bb1)) -* **subheading:** add subheading component ([#828](https://github.com/Microsoft/fast/issues/828)) ([b988ade](https://github.com/Microsoft/fast/commit/b988ade)) - - - - -# 2.1.0 (2018-08-29) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **paragraph:** adds paragraph as a new MSFT component ([#805](https://github.com/Microsoft/fast/issues/805)) ([8325d3f](https://github.com/Microsoft/fast/commit/8325d3f)) - - - - -# 2.0.0-corrected (2018-08-03) - - -### Bug Fixes - -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) -* **button:** updates to current msft styles ([#314](https://github.com/Microsoft/fast/issues/314)) ([0029e06](https://github.com/Microsoft/fast/commit/0029e06)) -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **fast-components-react-msft:** add flipper as a new component ([#642](https://github.com/Microsoft/fast/issues/642)) ([5ac4496](https://github.com/Microsoft/fast/commit/5ac4496)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) -* **heading:** add heading as a new msft component ([#280](https://github.com/Microsoft/fast/issues/280)) ([b7ee1ab](https://github.com/Microsoft/fast/commit/b7ee1ab)) - - - - - - -# [2.1.0](https://github.com/Microsoft/fast/compare/v2.0.0-corrected...v2.1.0) (2018-08-29) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **paragraph:** adds paragraph as a new MSFT component ([#805](https://github.com/Microsoft/fast/issues/805)) ([8325d3f](https://github.com/Microsoft/fast/commit/8325d3f)) - - - - - - -# [2.0.0](https://github.com/Microsoft/fast/compare/v1.6.0...v2.0.0) (2018-08-02) - - -### Bug Fixes - -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **fast-components-react-msft:** add flipper as a new component ([#642](https://github.com/Microsoft/fast/issues/642)) ([5ac4496](https://github.com/Microsoft/fast/commit/5ac4496)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - - - - -# [1.9.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.9.0) (2018-07-14) - - -### Bug Fixes - -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **fast-components-react-msft:** add flipper as a new component ([#642](https://github.com/Microsoft/fast/issues/642)) ([5ac4496](https://github.com/Microsoft/fast/commit/5ac4496)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - - - - -# [1.8.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.8.0) (2018-06-12) - - - - - -# [1.7.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.7.0) (2018-06-01) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) - - - - - -# [1.6.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.6.0) (2018-05-16) - - - - - -# [1.5.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.5.0) (2018-05-16) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# [1.4.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.4.0) (2018-05-14) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# 1.2.0 (2018-05-10) - - -# 1.1.0 (2018-05-09) - - -### Bug Fixes - -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) - - -### Features - -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) -* **button:** updates to current msft styles ([#314](https://github.com/Microsoft/fast/issues/314)) ([0029e06](https://github.com/Microsoft/fast/commit/0029e06)) -* **heading:** add heading as a new msft component ([#280](https://github.com/Microsoft/fast/issues/280)) ([b7ee1ab](https://github.com/Microsoft/fast/commit/b7ee1ab)) diff --git a/packages/react/fast-components-class-name-contracts-msft/README.md b/packages/react/fast-components-class-name-contracts-msft/README.md deleted file mode 100644 index ca6c615c5a5..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# FAST Components class name contracts MSFT - -This package refrences the BASE class name contracts and provides the TypeScript typings for all MSFT components class name contracts. These contracts enable strict typing of JSS stylesheets and each component's expectation of which class names will be made available (and under which keys those class names reside) to the component at runtime. diff --git a/packages/react/fast-components-class-name-contracts-msft/package.json b/packages/react/fast-components-class-name-contracts-msft/package.json deleted file mode 100644 index f7fe5009e6e..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "@microsoft/fast-components-class-name-contracts-msft", - "description": "Type descriptions for the classnames that any given component can expect as props.", - "sideEffects": false, - "version": "4.9.0", - "author": { - "name": "Microsoft", - "url": "https://discord.gg/FcSNfg4" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/microsoft/fast-react.git" - }, - "bugs": { - "url": "https://github.com/Microsoft/fast/issues/new/choose" - }, - "main": "./dist/index.js", - "types": "./dist/index.d.ts", - "scripts": { - "build": "tsc -p ./tsconfig.build.json", - "clean:dist": "node ../../../build/clean.js dist", - "prepare": "yarn clean:dist && yarn build", - "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"", - "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different", - "test": "yarn eslint", - "eslint": "eslint . --ext .ts", - "eslint:fix": "eslint . --ext .ts --fix", - "watch": "yarn build -- -w --preserveWatchOutput" - }, - "devDependencies": { - "@microsoft/eslint-config-fast-dna": "^1.2.0", - "eslint-config-prettier": "^6.10.1", - "prettier": "2.0.2", - "typescript": "^3.9.0" - }, - "dependencies": { - "@microsoft/fast-components-class-name-contracts-base": "^4.8.0" - } -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/action-toggle/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/action-toggle/index.ts deleted file mode 100644 index 76bfd7bd314..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/action-toggle/index.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * The class name contract for the action toggle component - */ -export interface ActionToggleClassNameContract { - /** - * The root of the action toggle component - */ - actionToggle?: string; - - /** - * The selected modifier - */ - actionToggle__selected?: string; - - /** - * Applied to both selected and unselected glyphs - */ - actionToggle_glyph?: string; - - /** - * The action toggle selected glyph - */ - actionToggle_selectedGlyph?: string; - - /** - * The action toggle unselected glyph - */ - actionToggle_unselectedGlyph?: string; - - /** - * The justified appearance modifier - */ - actionToggle__justified?: string; - - /** - * The lightweight appearance modifier - */ - actionToggle__lightweight?: string; - - /** - * The outline appearance modifier - */ - actionToggle__outline?: string; - - /** - * The primary appearance modifier - */ - actionToggle__primary?: string; - - /** - * The stealth appearance modifier - */ - actionToggle__stealth?: string; - - /** - * The disabled modifier - */ - actionToggle__disabled?: string; - - /** - * The single element modifier - */ - actionToggle__hasGlyphAndContent?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/action-trigger/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/action-trigger/index.ts deleted file mode 100644 index aeb64d12957..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/action-trigger/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * The class name contract for the action trigger component - */ -export interface ActionTriggerClassNameContract { - /** - * The root of the action trigger component - */ - actionTrigger?: string; - /** - * The action trigger glyph - */ - actionTrigger_glyph?: string; - - /** - * The justified appearance modifier - */ - actionTrigger__justified?: string; - - /** - * The lightweight appearance modifier - */ - actionTrigger__lightweight?: string; - - /** - * The outline appearance modifier - */ - actionTrigger__outline?: string; - - /** - * The primary appearance modifier - */ - actionTrigger__primary?: string; - - /** - * The stealth appearance modifier - */ - actionTrigger__stealth?: string; - - /** - * The disabled modifier - */ - actionTrigger__disabled?: string; - - /** - * Action trigger class name used when checking glyph and content - */ - actionTrigger__hasGlyphAndContent?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest-option/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest-option/index.ts deleted file mode 100644 index 9243628eab5..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest-option/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ListboxItemClassNameContract as BaseListboxItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the auto suggest option component - */ -export interface AutoSuggestOptionClassNameContract - extends BaseListboxItemClassNameContract { - /** - * The root of the auto suggest option component - */ - autoSuggestOption?: string; - - /** - * The disabled modifier - */ - autoSuggestOption__disabled?: string; - - /** - * The selected modifier - */ - autoSuggestOption__selected?: string; - - /** - * The auto suggest option content region - */ - autoSuggestOption_contentRegion?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest/index.ts deleted file mode 100644 index 29a333e23ac..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/auto-suggest/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { AutoSuggestClassNameContract as BaseAutoSuggestClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the select component - */ -export interface AutoSuggestClassNameContract extends BaseAutoSuggestClassNameContract { - /** - * The glyph shown in the select toggle button - */ - select_toggleGlyph?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/badge/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/badge/index.ts deleted file mode 100644 index e16ed98d42d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/badge/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { BadgeClassNameContract as BaseBadgeClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the badge component - */ -export interface BadgeClassNameContract extends BaseBadgeClassNameContract { - /** - * The small size - */ - badge__small?: string; - - /** - * The large size - */ - badge__large?: string; - - /** - * The filled backplate appearance style - */ - badge__filled: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/button-base/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/button-base/index.ts deleted file mode 100644 index 0f908172e1d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/button-base/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { ButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the button component - */ -export interface ButtonBaseClassNameContract extends ButtonClassNameContract { - /** - * The button content region - */ - button_contentRegion?: string; - - /** - * The before content - */ - button_beforeContent?: string; - - /** - * The after content - */ - button_afterContent?: string; - - /** - * Class name used when button has either beforeContent or afterContent and children - */ - button__hasBeforeOrAfterAndChildren?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/button/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/button/index.ts deleted file mode 100644 index f9a4b5242ae..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/button/index.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { ButtonClassNameContract as BaseButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the button component - */ -export interface ButtonClassNameContract extends BaseButtonClassNameContract { - /** - * The primary appearance modifier - */ - button__primary?: string; - - /** - * The outline appearance modifier - */ - button__outline?: string; - - /** - * The lightweight appearance modifier - */ - button__lightweight?: string; - - /** - * The justified appearance modifier - */ - button__justified?: string; - - /** - * The stealth appearance modifier - */ - button__stealth?: string; - - /** - * The button content region - */ - button_contentRegion?: string; - - /** - * The before content - */ - button_beforeContent?: string; - - /** - * The after content - */ - button_afterContent?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/call-to-action/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/call-to-action/index.ts deleted file mode 100644 index 07cdc68c1a6..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/call-to-action/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * The class name contract for the call to action component - */ -export interface CallToActionClassNameContract { - /** - * The root of the call to action component - */ - callToAction?: string; - - /** - * The call to action glyph - */ - callToAction_glyph?: string; - - /** - * The justified appearance modifier - */ - callToAction__justified?: string; - - /** - * The lightweight appearance modifier - */ - callToAction__lightweight?: string; - - /** - * The outline appearance modifier - */ - callToAction__outline?: string; - - /** - * The primary appearance modifier - */ - callToAction__primary?: string; - - /** - * The stealth appearance modifier - */ - callToAction__stealth?: string; - - /** - * The disabled modifier - */ - callToAction__disabled?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/caption/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/caption/index.ts deleted file mode 100644 index b72e37fbffa..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/caption/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * The class name contract for the caption component - */ -export interface CaptionClassNameContract { - /** - * The root of the caption component - */ - caption?: string; - - /** - * The size 1 modifier - */ - caption__1?: string; - - /** - * The size 2 modifier - */ - caption__2?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/carousel/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/carousel/index.ts deleted file mode 100644 index 6c0737a93a0..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/carousel/index.ts +++ /dev/null @@ -1,80 +0,0 @@ -/** - * The class name contract for the carousel component - */ - -export interface CarouselClassNameContract { - /** - * The root of the carousel component - */ - carousel?: string; - - /** - * The collection of tabs and tab panels - */ - carousel_slides?: string; - - /** - * The collection of sequence indicators - */ - carousel_sequenceIndicators?: string; - - /** - * The sequence indicator - */ - carousel_sequenceIndicator?: string; - - /** - * The active carousel sequence indicator - */ - carousel_sequenceIndicator__active?: string; - - /** - * The collection of tab panels - */ - carousel_tabPanels?: string; - - /** - * The tab panel - */ - carousel_tabPanel?: string; - - /** - * The hidden tab panel - */ - carousel_tabPanel__hidden?: string; - - /** - * The tab panel content - */ - carousel_tabPanelContent?: string; - - /** - * The carousel's previous flipper - */ - carousel_flipperPrevious?: string; - - /** - * The carousel's next flipper - */ - carousel_flipperNext?: string; - - /** - * The light slide theme - */ - carousel__themeLight?: string; - - /** - * The dark slide theme - */ - carousel__themeDark?: string; - - /** - * The previous slide transition - */ - carousel__slideAnimatePrevious?: string; - - /** - * The next slide transition - */ - carousel__slideAnimateNext?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/context-menu-item/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/context-menu-item/index.ts deleted file mode 100644 index 8dc62b23b39..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/context-menu-item/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ContextMenuItemClassNameContract as BaseContextMenuItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the context menu item component - */ -export interface ContextMenuItemClassNameContract - extends BaseContextMenuItemClassNameContract { - /** - * The context menu item content region - */ - contextMenuItem_contentRegion?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/data-grid/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/data-grid/index.ts deleted file mode 100644 index 27728379e5d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/data-grid/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { DataGridClassNameContract as BaseDataGridClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the data grid component - */ -/* eslint-disable-next-line @typescript-eslint/no-empty-interface */ -export interface DataGridClassNameContract extends BaseDataGridClassNameContract {} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/flipper/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/flipper/index.ts deleted file mode 100644 index efcb31ee20e..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/flipper/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * The class name contract for the flipper component - */ -export interface FlipperClassNameContract { - /** - * The root of the flipper component - */ - flipper?: string; - - /** - * The flipper glyph - */ - flipper_glyph?: string; - - /** - * The next direction flipper modifier - */ - flipper__next?: string; - - /** - * The previous direction flipper modifier - */ - flipper__previous?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/flyout/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/flyout/index.ts deleted file mode 100644 index 1557bd38282..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/flyout/index.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * The class name contract for the flyout component - */ -export interface FlyoutClassNameContract { - /** - * The root of the flyout component - */ - flyout?: string; - - /** - * left flyout horizontal state - */ - flyout__left?: string; - - /** - * right flyout horizontal state - */ - flyout__right?: string; - - /** - * top flyout vertical state - */ - flyout__top?: string; - - /** - * bottom flyout vertical state - */ - flyout__bottom?: string; - - /** - * horizontal flip inward state - */ - flyout__horizontalInset?: string; - - /** - * vertical flip inward state - */ - flyout__verticalInset?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/heading/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/heading/index.ts deleted file mode 100644 index 55eff21a7e0..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/heading/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * The class name contract for the heading component - */ -export interface HeadingClassNameContract { - /** - * The root of the heading component - */ - heading?: string; - - /** - * The size 1 modifier - */ - heading__1?: string; - - /** - * The size 2 modifier - */ - heading__2?: string; - - /** - * The size 3 modifier - */ - heading__3?: string; - - /** - * The size 4 modifier - */ - heading__4?: string; - - /** - * The size 5 modifier - */ - heading__5?: string; - - /** - * The size 6 modifier - */ - heading__6?: string; - - /** - * The size 7 modifier - */ - heading__7?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/index.ts deleted file mode 100644 index 78bd41ff195..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -export * from "./action-toggle"; -export * from "./action-trigger"; -export * from "./auto-suggest"; -export * from "./auto-suggest-option"; -export * from "./badge"; -export * from "./button"; -export * from "./button-base"; -export * from "./call-to-action"; -export * from "./caption"; -export * from "./carousel"; -export * from "./context-menu-item"; -export * from "./data-grid"; -export * from "./flipper"; -export * from "./flyout"; -export * from "./heading"; -export * from "./managed-classes"; -export * from "./metatext"; -export * from "./paragraph"; -export * from "./pivot"; -export * from "./progress"; -export * from "./select"; -export * from "./select-option"; -export * from "./slider"; -export * from "./slider-label"; -export * from "./subheading"; -export * from "./text-action"; -export * from "./text-field"; -export * from "./tree-view-item"; diff --git a/packages/react/fast-components-class-name-contracts-msft/src/managed-classes.ts b/packages/react/fast-components-class-name-contracts-msft/src/managed-classes.ts deleted file mode 100644 index 62359585254..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/managed-classes.ts +++ /dev/null @@ -1 +0,0 @@ -export { ManagedClasses } from "@microsoft/fast-components-class-name-contracts-base"; diff --git a/packages/react/fast-components-class-name-contracts-msft/src/metatext/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/metatext/index.ts deleted file mode 100644 index 95d0b32e358..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/metatext/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The class name contract for the metatext component - */ -export interface MetatextClassNameContract { - /** - * The root of the metatext component - */ - metatext?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/paragraph/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/paragraph/index.ts deleted file mode 100644 index 67cdcb77ff3..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/paragraph/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * The class name contract for the paragraph component - */ -export interface ParagraphClassNameContract { - /** - * The root of the paragraph component - */ - paragraph?: string; - - /** - * The size 1 modifier - */ - paragraph__1?: string; - - /** - * The size 2 modifier - */ - paragraph__2?: string; - - /** - * The size 3 modifier - */ - paragraph__3?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/pivot/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/pivot/index.ts deleted file mode 100644 index 07a63f80682..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/pivot/index.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * The class name contract for the pivot component - */ -export interface PivotClassNameContract { - /** - * The root of the pivot component - */ - pivot?: string; - - /** - * The active pivot indicator - */ - pivot_activeIndicator?: string; - - /** - * The collection of pivot items - */ - pivot_tabList?: string; - - /** - * The pivot item - */ - pivot_tab?: string; - - /** - * The active pivot item - */ - pivot_tab__active?: string; - - /** - * The pivot tab content - */ - pivot_tabContent?: string; - - /** - * The collection of tab panels - */ - pivot_tabPanels?: string; - - /** - * The previous panel animation - */ - pivot_tabPanels__animatePrevious?: string; - - /** - * The next tab panel animation - */ - pivot_tabPanels__animateNext?: string; - - /** - * The tab panel - */ - pivot_tabPanel?: string; - - /** - * The hidden tab panel - */ - pivot_tabPanel__hidden?: string; - - /** - * The tab panel content - */ - pivot_tabPanelContent?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/progress/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/progress/index.ts deleted file mode 100644 index 5d984025336..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/progress/index.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { ProgressClassNameContract as BaseProgressClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the progress component - */ -export interface ProgressClassNameContract extends BaseProgressClassNameContract { - /** - * The root progress circular modifier - */ - progress__circular?: string; - - /** - * The root progress paused modifier - */ - progress__paused?: string; - - /** - * The progress size control modifier - */ - progress_circularSVG__control: string; - - /** - * The progress size container modifier - */ - progress_circularSVG__container: string; - - /** - * The progress size page modifier - */ - progress_circularSVG__page: string; - - /** - * The progress value indicator - */ - progress_valueIndicator?: string; - - /** - * The indeterminate progress value indicator - */ - progress_valueIndicator__indeterminate?: string; - - /** - * The indeterminate progress indicator - */ - progress_indicator?: string; - - /** - * The determinate progress value indicator - */ - progress_indicator__determinate?: string; - - /** - * The indeterminate progress indicator - */ - progress_dot?: string; - - /** - * The indeterminate progress indicator 1 modifier - */ - progress_dot__1?: string; - - /** - * The indeterminate progress indicator 2 modifier - */ - progress_dot__2?: string; - - /** - * @Deprecated 3.4.0 - */ - progress_dot__3?: string; - - /** - * @Deprecated 3.4.0 - */ - progress_dot__4?: string; - - /** - * @Deprecated 3.4.0 - */ - progress_dot__5?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/select-option/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/select-option/index.ts deleted file mode 100644 index 61c1b195715..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/select-option/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { ListboxItemClassNameContract as BaseListboxItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the select option component - */ -export interface SelectOptionClassNameContract extends BaseListboxItemClassNameContract { - /** - * The root of the select option component - */ - selectOption?: string; - - /** - * The disabled modifier - */ - selectOption__disabled?: string; - - /** - * The selected modifier - */ - selectOption__selected?: string; - - /** - * Select option content region - */ - selectOption_contentRegion?: string; - - /** - * Select option glyph - */ - selectOption_glyph?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/select/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/select/index.ts deleted file mode 100644 index 7704745e9ab..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/select/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { SelectClassNameContract as BaseSelectClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the select component - */ -export interface SelectClassNameContract extends BaseSelectClassNameContract { - /** - * The glyph shown in the select toggle button - */ - select_toggleGlyph?: string; - - /** - * The select toggle button - */ - select_button?: string; - - /** - * The select toggle button content region - */ - select_buttonContentRegion?: string; - - /** - * The display text container - */ - select_buttonDisplayText?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/slider-label/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/slider-label/index.ts deleted file mode 100644 index 6b0a1bc2be5..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/slider-label/index.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { SliderTrackItemClassNameContract as BaseSliderTrackItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the slider label component - */ -export interface SliderLabelClassNameContract - extends BaseSliderTrackItemClassNameContract { - /** - * The root of the slider label component - */ - sliderLabel?: string; - - /** - * The label portion of the slider label component - */ - sliderLabel_positioningRegion?: string; - - /** - * The label portion of the slider label component - */ - sliderLabel_label?: string; - - /** - * The label position min modifier, - * applied to positioning panel at min end of range - */ - sliderLabel__positionMin?: string; - - /** - * The label position max modifier - * applied to positioning panel at max end of range - */ - sliderLabel__positionMax?: string; - - /** - * The tick mark portion of the slider label component - */ - sliderLabel_tickMark?: string; - - /** - * The horizontal orientation modifier - */ - sliderLabel__horizontal?: string; - - /** - * The vertical orientation modifier - */ - sliderLabel__vertical?: string; - - /** - * The rtl modifier - */ - sliderLabel__rtl?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/slider/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/slider/index.ts deleted file mode 100644 index 3d21b65aa7c..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/slider/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { SliderClassNameContract as BaseSliderClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the select component - */ -/* eslint-disable-next-line @typescript-eslint/no-empty-interface */ -export interface SliderClassNameContract extends BaseSliderClassNameContract {} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/subheading/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/subheading/index.ts deleted file mode 100644 index b077d2d521d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/subheading/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * The class name contract for the subheading component - */ -export interface SubheadingClassNameContract { - /** - * The root of the subheading component - */ - subheading?: string; - - /** - * The size 1 modifier - */ - subheading__1?: string; - - /** - * The size 2 modifier - */ - subheading__2?: string; - - /** - * The size 3 modifier - */ - subheading__3?: string; - - /** - * The size 4 modifier - */ - subheading__4?: string; - - /** - * The size 5 modifier - */ - subheading__5?: string; - - /** - * The size 6 modifier - */ - subheading__6?: string; - - /** - * The size 7 modifier - */ - subheading__7?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/text-action/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/text-action/index.ts deleted file mode 100644 index 30be455051d..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/text-action/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * The class name contract for the text action component - */ -export interface TextActionClassNameContract { - /** - * The root of the text action component - */ - textAction: string; - - /** - * The filled appearance modifier - */ - textAction__filled?: string; - - /** - * The outline appearance modifier - */ - textAction__outline?: string; - - /** - * The disabled state - */ - textAction__disabled: string; - - /** - * The focused state - */ - textAction__focus: string; - - /** - * The button - */ - textAction_button: string; - - /** - * The preceding glyph - */ - textAction_beforeGlyph: string; - - /** - * The trailing glyph - */ - textAction_afterGlyph: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/text-field/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/text-field/index.ts deleted file mode 100644 index 1ad66d3e402..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/text-field/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TextFieldClassNameContract as BaseTextFieldClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the text field component - */ -export interface TextFieldClassNameContract extends BaseTextFieldClassNameContract { - /** - * The filled appearance modifier - */ - textField__filled?: string; - - /** - * The outline appearance modifier - */ - textField__outline?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/src/tree-view-item/index.ts b/packages/react/fast-components-class-name-contracts-msft/src/tree-view-item/index.ts deleted file mode 100644 index 6f29a27106e..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/src/tree-view-item/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TreeViewItemClassNameContract as BaseTreeViewItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * The class name contract for the tree view component - */ -export interface TreeViewItemClassNameContract extends BaseTreeViewItemClassNameContract { - /** - * The tree view item before content - */ - treeViewItem_beforeContent?: string; - - /** - * The tree view item after content - */ - treeViewItem_afterContent?: string; -} diff --git a/packages/react/fast-components-class-name-contracts-msft/tsconfig.build.json b/packages/react/fast-components-class-name-contracts-msft/tsconfig.build.json deleted file mode 100644 index afac3a95dda..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/tsconfig.build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": [ - "src/**/*" - ], - "exclude": [ - "**/*.spec.ts" - ] -} diff --git a/packages/react/fast-components-class-name-contracts-msft/tsconfig.json b/packages/react/fast-components-class-name-contracts-msft/tsconfig.json deleted file mode 100644 index 0446e02be86..00000000000 --- a/packages/react/fast-components-class-name-contracts-msft/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "outDir": "./dist" - } -} diff --git a/packages/react/fast-components-foundation-react/.eslintignore b/packages/react/fast-components-foundation-react/.eslintignore deleted file mode 100644 index 2e62dfce300..00000000000 --- a/packages/react/fast-components-foundation-react/.eslintignore +++ /dev/null @@ -1,6 +0,0 @@ -# don't ever lint node_modules -node_modules -# don't lint build output (make sure it's set to your correct build folder name) -dist -# don't lint coverage output -coverage diff --git a/packages/react/fast-components-foundation-react/.eslintrc.js b/packages/react/fast-components-foundation-react/.eslintrc.js deleted file mode 100644 index 8712625260a..00000000000 --- a/packages/react/fast-components-foundation-react/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: ["@microsoft/eslint-config-fast-dna", "prettier"], -}; diff --git a/packages/react/fast-components-foundation-react/.npmignore b/packages/react/fast-components-foundation-react/.npmignore deleted file mode 100644 index 78ed8a8e237..00000000000 --- a/packages/react/fast-components-foundation-react/.npmignore +++ /dev/null @@ -1,10 +0,0 @@ -# Tests -__test__/ -*.spec.* -*.test.* - -# Source files -src/ - -# babel config -babel.config.js \ No newline at end of file diff --git a/packages/react/fast-components-foundation-react/.npmrc b/packages/react/fast-components-foundation-react/.npmrc deleted file mode 100644 index 43c97e719a5..00000000000 --- a/packages/react/fast-components-foundation-react/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/packages/react/fast-components-foundation-react/.prettierignore b/packages/react/fast-components-foundation-react/.prettierignore deleted file mode 100644 index 521e20e203d..00000000000 --- a/packages/react/fast-components-foundation-react/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -coverage/* -dist/* -www/* \ No newline at end of file diff --git a/packages/react/fast-components-foundation-react/CHANGELOG.md b/packages/react/fast-components-foundation-react/CHANGELOG.md deleted file mode 100644 index e7149756f3f..00000000000 --- a/packages/react/fast-components-foundation-react/CHANGELOG.md +++ /dev/null @@ -1,208 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [3.2.0](https://github.com/microsoft/fast-react/compare/@microsoft/fast-components-foundation-react@3.1.11...@microsoft/fast-components-foundation-react@3.2.0) (2020-07-14) - - -### Bug Fixes - -* update repo URL to be the soon-to-be archived repo for React packages ([#3498](https://github.com/microsoft/fast-react/issues/3498)) ([693d7fd](https://github.com/microsoft/fast-react/commit/693d7fd70823fbc9cc13d502764dbef8faf27e6f)) - - -### Features - -* update typescript version and remove utility types dependencies for react packages ([#3422](https://github.com/microsoft/fast-react/issues/3422)) ([09d07b5](https://github.com/microsoft/fast-react/commit/09d07b580cda3bcc5d28f83d3568521f710c9576)) - - - - - -## [3.1.11](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.10...@microsoft/fast-components-foundation-react@3.1.11) (2020-06-26) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.9](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.8...@microsoft/fast-components-foundation-react@3.1.9) (2020-05-18) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.8](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.7...@microsoft/fast-components-foundation-react@3.1.8) (2020-04-29) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.7](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.6...@microsoft/fast-components-foundation-react@3.1.7) (2020-04-27) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.5...@microsoft/fast-components-foundation-react@3.1.6) (2020-04-22) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.4...@microsoft/fast-components-foundation-react@3.1.5) (2020-04-10) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.3...@microsoft/fast-components-foundation-react@3.1.4) (2020-03-13) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.2...@microsoft/fast-components-foundation-react@3.1.3) (2019-11-07) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.1...@microsoft/fast-components-foundation-react@3.1.2) (2019-10-25) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [3.1.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.1.0...@microsoft/fast-components-foundation-react@3.1.1) (2019-05-31) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -# [3.1.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.0.1...@microsoft/fast-components-foundation-react@3.1.0) (2019-04-23) - - -### Features - -* reduce dependency on peer dependencies ([#1669](https://github.com/Microsoft/fast/issues/1669)) ([cc06b10](https://github.com/Microsoft/fast/commit/cc06b10)) - - - - - -## [3.0.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@3.0.0...@microsoft/fast-components-foundation-react@3.0.1) (2019-04-09) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -# [3.0.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.1.4...@microsoft/fast-components-foundation-react@3.0.0) (2019-03-25) - - -### Bug Fixes - -* update to use esModuleInterop in the TypeScript configuration files ([#1211](https://github.com/Microsoft/fast/issues/1211)) ([2ec0644](https://github.com/Microsoft/fast/commit/2ec0644)) - - -### BREAKING CHANGES - -* This will affect how imports will be handled by -consumers - - - - - -## [2.1.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.1.3...@microsoft/fast-components-foundation-react@2.1.4) (2019-03-19) - - -### Bug Fixes - -* added test for bug [#1329](https://github.com/Microsoft/fast/issues/1329) and fixed the bug ([#1547](https://github.com/Microsoft/fast/issues/1547)) ([ebd3dfa](https://github.com/Microsoft/fast/commit/ebd3dfa)) -* update jest to fix build break ([#1531](https://github.com/Microsoft/fast/issues/1531)) ([73ae6de](https://github.com/Microsoft/fast/commit/73ae6de)) - - - - - -## [2.1.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.1.2...@microsoft/fast-components-foundation-react@2.1.3) (2019-02-21) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [2.1.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.1.1...@microsoft/fast-components-foundation-react@2.1.2) (2019-02-07) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -## [2.1.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.1.0...@microsoft/fast-components-foundation-react@2.1.1) (2018-11-07) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -# [2.1.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.0.1...@microsoft/fast-components-foundation-react@2.1.0) (2018-11-05) - - -### Features - -* performance updates to JSS Manager ([#1110](https://github.com/Microsoft/fast/issues/1110)) ([db4b753](https://github.com/Microsoft/fast/commit/db4b753)) - - - - - -## [2.0.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-foundation-react@2.0.0...@microsoft/fast-components-foundation-react@2.0.1) (2018-10-27) - -**Note:** Version bump only for package @microsoft/fast-components-foundation-react - - - - - -# 2.0.0 (2018-10-06) - - -### Bug Fixes - -* move foundation component into a new package and implement it in component and layout libraries ([#979](https://github.com/Microsoft/fast/issues/979)) ([acae283](https://github.com/Microsoft/fast/commit/acae283)) - - -### chore - -* remove the 'I' from interfaces ([#997](https://github.com/Microsoft/fast/issues/997)) ([d924df8](https://github.com/Microsoft/fast/commit/d924df8)) - - -### BREAKING CHANGES - -* Interfaces have been renamed to remove the "I". diff --git a/packages/react/fast-components-foundation-react/README.md b/packages/react/fast-components-foundation-react/README.md deleted file mode 100644 index 54b213b6002..00000000000 --- a/packages/react/fast-components-foundation-react/README.md +++ /dev/null @@ -1,180 +0,0 @@ -# FAST Components foundation React - -The foundation component for FAST component packages in React. The default export is an extension from the `React.Component` and includes additional functionality for extension by React component libraries. - -## Installation - -`npm i --save @microsoft/fast-components-foundation-react` - -## Usage - -### Basic implementation - -```jsx -import React from "react"; -import ReactDOM from "react-dom"; -import Foundation from "@microsoft/fast-components-foundation-react"; - -class MyComponent extends Foundation { - render() { - return
; - } -} - -export default MyComponent; -``` - -### Unhandled props - -A method which allows any property that has not been specified by the component extending `Foundation` to be accessed, eg. `onClick`, `aria` and datasets. - -Component example: - -```jsx -class MyComponent extends Foundation { - render() { - return
; - } -} -``` - -Component implementation: - -```jsx - -``` - -Rendered result: - -```html - -``` - -### `setRef` and `getRef` - -The `setRef` and `getRef` use lodash's get/set API, so the provided `string` can be `my-component-element`, `my-component-element[0]` etc. - -```jsx -class MyComponent extends Foundation { - componentDidMount() { - const myComponentElement = this.getRef("my-component-element"); - - // do something - } - - render() { - return
; - } -} -``` - -### `generateClassNames` - -This method can be used to pass any className when it is passed. - -Component example: - -```jsx -class MyComponent extends Foundation { - render() { - return
; - } -} -``` - -Component implementation: - -```jsx - -``` - -Rendered result: - -```html -
-``` - -### `withSlot` - -Gets all children with the `slot` prop that matches a given string, example: `this.withSlot("after")`. - -Component example: - -```jsx -class MyComponent extends Foundation { - render() { - return ( -
- {this.withSlot("foo")} -
- ); - } -} -``` - -Component implementation: - -```jsx - - - Hello, world! - - -``` - -Rendered result: - -```html -
- - Hello, world! - -
-``` - -### `withoutSlot` - -Gets all children with the `slot` prop that does not match a given string, example: `this.withoutSlot("after")`. - -Component example: - -```jsx -class MyComponent extends Foundation { - render() { - return ( -
- {this.withoutSlot("foo")} -
- ); - } -} -``` - -Component implementation: - -```jsx - - - Hello, world! - -

- Hello, pluto! -

-

- A bold new world -

- -``` - -Rendered result: - -```html -
-

- Hello, pluto! -

-

- A bold new world -

-
-``` \ No newline at end of file diff --git a/packages/react/fast-components-foundation-react/babel.config.js b/packages/react/fast-components-foundation-react/babel.config.js deleted file mode 100644 index 190c11f3eda..00000000000 --- a/packages/react/fast-components-foundation-react/babel.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - presets: [ - [ - "@babel/preset-env", { - "targets": { - "node": "current" - } - } - ], - "@babel/react" - ] -} \ No newline at end of file diff --git a/packages/react/fast-components-foundation-react/package.json b/packages/react/fast-components-foundation-react/package.json deleted file mode 100644 index b96675d8074..00000000000 --- a/packages/react/fast-components-foundation-react/package.json +++ /dev/null @@ -1,100 +0,0 @@ -{ - "name": "@microsoft/fast-components-foundation-react", - "description": "FAST component foundation implemented in React.", - "sideEffects": false, - "version": "3.2.0", - "author": { - "name": "Microsoft", - "url": "https://discord.gg/FcSNfg4" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/microsoft/fast-react.git" - }, - "bugs": { - "url": "https://github.com/Microsoft/fast/issues/new/choose" - }, - "main": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "build": "tsc -p ./tsconfig.build.json", - "clean:dist": "node ../../../build/clean.js dist", - "coverage": "jest --coverage", - "prepare": "yarn clean:dist && yarn build", - "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,tsx}\"", - "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,tsx}\" --list-different", - "test": "yarn eslint && yarn unit-tests", - "eslint": "eslint . --ext .ts,.tsx", - "eslint:fix": "eslint . --ext .ts,.tsx --fix", - "unit-tests": "jest --runInBand --env=jsdom", - "unit-tests:watch": "jest --watch", - "watch": "tsc -p ./tsconfig -w --preserveWatchOutput" - }, - "jest": { - "collectCoverage": true, - "coverageReporters": [ - "json", - "text", - [ - "lcov", - { - "projectRoot": "../../../" - } - ] - ], - "coverageThreshold": { - "global": { - "statements": 80, - "branches": 80, - "functions": 80, - "lines": 80 - } - }, - "testURL": "http://localhost", - "transform": { - "^.+\\.tsx?$": "ts-jest", - "^.+\\.jsx?$": "babel-jest" - }, - "transformIgnorePatterns": [ - "!/node_modules/lodash-es" - ], - "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", - "moduleFileExtensions": [ - "ts", - "tsx", - "js", - "jsx", - "json" - ] - }, - "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/preset-env": "^7.1.0", - "@babel/preset-react": "^7.0.0", - "@microsoft/eslint-config-fast-dna": "^1.2.0", - "@types/jest": "^25.2.1", - "@types/lodash-es": "^4.17.0", - "@types/node": "^9.4.6", - "@types/react": "^16.4.18", - "babel-core": "^7.0.0-bridge.0", - "enzyme": "^3.3.0", - "enzyme-adapter-react-16": "^1.1.1", - "eslint-config-prettier": "^6.10.1", - "jest": "^25.4.0", - "jsdom-global": "^3.0.2", - "lodash-es": "^4.0.0", - "prettier": "2.0.2", - "react": "^16.6.0", - "react-dom": "^16.6.0", - "react-test-renderer": "^16.3.0", - "ts-jest": "^25.4.0", - "ts-loader": "^4.0.1", - "typescript": "^3.9.0" - }, - "peerDependencies": { - "lodash-es": "^4.0.0", - "react": "^16.6.0", - "react-dom": "^16.6.0" - } -} diff --git a/packages/react/fast-components-foundation-react/src/foundation/foundation.props.ts b/packages/react/fast-components-foundation-react/src/foundation/foundation.props.ts deleted file mode 100644 index f9139bab672..00000000000 --- a/packages/react/fast-components-foundation-react/src/foundation/foundation.props.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface FoundationProps { - /** - * Allow class names on all components - */ - className?: string; -} diff --git a/packages/react/fast-components-foundation-react/src/foundation/foundation.spec.tsx b/packages/react/fast-components-foundation-react/src/foundation/foundation.spec.tsx deleted file mode 100644 index fe32516b268..00000000000 --- a/packages/react/fast-components-foundation-react/src/foundation/foundation.spec.tsx +++ /dev/null @@ -1,528 +0,0 @@ -import React from "react"; -import ReactTestUtils from "react-dom/test-utils"; -import { has, merge } from "lodash-es"; -import Foundation, { HandledProps, ReferenceResolver } from "./foundation"; - -class GetRefTestComponent extends Foundation<{}, {}, {}> { - public render(): JSX.Element { - return
; - } -} - -describe("setRef", () => { - let getRefTestComponent: any; - - beforeEach(() => { - getRefTestComponent = new ReactTestUtils.renderIntoDocument( - - ); - }); - - test("should not throw if all parameters are null", () => { - expect(() => { - getRefTestComponent.setRef(null); - }).not.toThrow(); - expect(() => { - getRefTestComponent.setRef(null, null); - }).not.toThrow(); - }); - - test("should return undefined is a reference resolves to an object", () => { - getRefTestComponent.setRef("foo.bar"); - expect(typeof getRefTestComponent.setRef("foo")).toBe("undefined"); - }); - - test("should return undefined is a reference resolves to an array", () => { - getRefTestComponent.setRef("foo[0]"); - expect(typeof getRefTestComponent.setRef("foo")).toBe("undefined"); - }); - - test("should return undefined if all parameters are null", () => { - expect(typeof getRefTestComponent.setRef(null)).toBe("undefined"); - expect(typeof getRefTestComponent.setRef(null, null)).toBe("undefined"); - }); - - test("should return a function when a string is passed", () => { - expect(typeof getRefTestComponent.setRef("string")).toBe("function"); - }); - - test("should return a function when a number is passed", () => { - expect(typeof getRefTestComponent.setRef(0)).toBe("function"); - }); - - test("should return a function when a string and number are passed", () => { - expect(typeof getRefTestComponent.setRef("string", 0)).toBe("function"); - }); - - test("should return undefined if all parameters are null", () => { - expect(typeof getRefTestComponent.setRef(null)).toBe("undefined"); - expect(typeof getRefTestComponent.setRef(null, null)).toBe("undefined"); - }); - - test("should return a function when a string is passed", () => { - expect(typeof getRefTestComponent.setRef("string")).toBe("function"); - }); - - test("should return a function when a number is passed", () => { - expect(typeof getRefTestComponent.setRef(0)).toBe("function"); - }); - - test("should return a function when a string and number are passed", () => { - expect(typeof getRefTestComponent.setRef("string", 0)).toBe("function"); - }); - - test("should return a function when a number and boolean are passed", () => { - expect(typeof getRefTestComponent.setRef(0, true)).toBe("function"); - }); - - test("should return a function when a string and boolean are passed", () => { - expect(typeof getRefTestComponent.setRef("string", true)).toBe("function"); - }); - - test("should store the returned method under the path determined by args", () => { - const stringCallback: ReferenceResolver = getRefTestComponent.setRef("string"); - const numberCallback: ReferenceResolver = getRefTestComponent.setRef(0); - const stringAndNumberCallback: ReferenceResolver = getRefTestComponent.setRef( - "stringAndNumber", - 0 - ); - - expect(stringCallback).toBe(getRefTestComponent.referenceResolverStore.string); - expect(numberCallback).toBe(getRefTestComponent.referenceResolverStore[0]); - expect(stringAndNumberCallback).toBe( - getRefTestComponent.referenceResolverStore.stringAndNumber[0] - ); - }); - - test("should not factor booleans into the referenceResolvers object structure", () => { - const stringCallback: ReferenceResolver = getRefTestComponent.setRef( - "string", - true - ); - const numberCallback: ReferenceResolver = getRefTestComponent.setRef(0, true); - const stringAndNumberCallback: ReferenceResolver = getRefTestComponent.setRef( - "stringAndNumber", - 0, - true - ); - const stringAndNumberCallback1: ReferenceResolver = getRefTestComponent.setRef( - "stringAndNumber[1]", - true - ); - - expect(stringCallback).toBe(getRefTestComponent.referenceResolverStore.string); - expect(numberCallback).toBe(getRefTestComponent.referenceResolverStore[0]); - expect(stringAndNumberCallback).toBe( - getRefTestComponent.referenceResolverStore.stringAndNumber[0] - ); - expect(stringAndNumberCallback1).toBe( - getRefTestComponent.referenceResolverStore.stringAndNumber[1] - ); - }); -}); - -describe("getRef", () => { - let getRefTestComponent: any; - - beforeEach(() => { - getRefTestComponent = new ReactTestUtils.renderIntoDocument( - - ); - }); - - test("should not throw if all parameters are null", () => { - expect(() => { - getRefTestComponent.getRef(null); - }).not.toThrow(); - expect(() => { - getRefTestComponent.getRef(null, null); - }).not.toThrow(); - }); - - test("should return undefined if all parameters are null", () => { - expect(typeof getRefTestComponent.getRef(null)).toBe("undefined"); - expect(typeof getRefTestComponent.getRef(null, null)).toBe("undefined"); - }); - - test("should return the value mapping to the structure of params", () => { - getRefTestComponent.referenceStore = { - string: true, - 0: true, - stringAndNumber: [true], - }; - - expect(getRefTestComponent.getRef("string")).toBe(true); - expect(getRefTestComponent.getRef(0)).toBe(true); - expect(getRefTestComponent.getRef("stringAndNumber", 0)).toBe(true); - expect(getRefTestComponent.getRef("stringAndNumber[0]")).toBe(true); - }); -}); - -describe("unhandledProps", () => { - interface TestComponentHandledProps { - boolean: boolean; - string: string; - array: string[]; - object: any; - number: number; - undefined: undefined; - null: null; - } - - interface TestComponentUnhandledProps { - children?: React.ReactNode | React.ReactNode[]; - booleanDirty?: boolean; - stringDirty?: string; - arrayDirty?: string[]; - objectDirty?: any; - numberDirty?: number; - undefinedDirty?: void; - nullDirty?: null; - } - - const cleanProps: TestComponentHandledProps = { - boolean: true, - string: "string", - array: ["array"], - object: {}, - number: 1, - undefined: void 0, - null: null, - }; - - const dirtyProps: TestComponentUnhandledProps = { - children: "children", - booleanDirty: true, - stringDirty: "string", - arrayDirty: ["array"], - objectDirty: {}, - numberDirty: 1, - undefinedDirty: void 0, - nullDirty: null, - }; - - class UnhandledPropsTestComponent extends Foundation< - TestComponentHandledProps, - TestComponentUnhandledProps, - undefined - > { - public handledProps: HandledProps = { - boolean: void 0, - string: void 0, - array: void 0, - object: void 0, - number: void 0, - undefined: void 0, - null: void 0, - }; - - public render(): JSX.Element { - return

hello world

; - } - } - - class UnhandledPropsOnlyTestComponent extends Foundation< - any, - TestComponentUnhandledProps, - undefined - > { - public render(): JSX.Element { - return

hello world

; - } - } - - let unhandledPropsTestComponentClean: UnhandledPropsTestComponent; - let unhandledPropsTestComponentDirty: UnhandledPropsTestComponent; - let nullHandledpropsTestComponent: UnhandledPropsOnlyTestComponent; - - beforeEach(() => { - unhandledPropsTestComponentClean = new ReactTestUtils.renderIntoDocument( - - ); - unhandledPropsTestComponentDirty = new ReactTestUtils.renderIntoDocument( - - ); - }); - - test("should return an object", () => { - expect(typeof unhandledPropsTestComponentClean["unhandledProps"]()).toBe( - "object" - ); - expect(unhandledPropsTestComponentClean["unhandledProps"]()).not.toBe(null); - }); - - test("return object should not include children", () => { - const unhandledProps: TestComponentUnhandledProps = unhandledPropsTestComponentDirty[ - "unhandledProps" - ](); - - expect(has(unhandledProps, "children")).toBe(false); - }); - - test("return object should contain all property keys passed to props that is not enumerated on handledProps", () => { - const unhandledProps: TestComponentUnhandledProps = unhandledPropsTestComponentDirty[ - "unhandledProps" - ](); - - expect(has(unhandledProps, "booleanDirty")).toBe(true); - expect(has(unhandledProps, "stringDirty")).toBe(true); - expect(has(unhandledProps, "arrayDirty")).toBe(true); - expect(has(unhandledProps, "objectDirty")).toBe(true); - expect(has(unhandledProps, "numberDirty")).toBe(true); - expect(has(unhandledProps, "undefinedDirty")).toBe(true); - expect(has(unhandledProps, "nullDirty")).toBe(true); - }); - - test("return object should not contain any property keys contained on handledProps", () => { - const unhandledProps: TestComponentUnhandledProps = unhandledPropsTestComponentClean[ - "unhandledProps" - ](); - - expect(has(unhandledProps, "boolean")).toBe(false); - expect(has(unhandledProps, "string")).toBe(false); - expect(has(unhandledProps, "array")).toBe(false); - expect(has(unhandledProps, "object")).toBe(false); - expect(has(unhandledProps, "number")).toBe(false); - expect(has(unhandledProps, "undefined")).toBe(false); - expect(has(unhandledProps, "null")).toBe(false); - }); - - test("shoult not throw exeption if unhandled props are passed in without handledprops", () => { - nullHandledpropsTestComponent = new ReactTestUtils.renderIntoDocument( - - ); - expect(typeof nullHandledpropsTestComponent["unhandledProps"]()).toBe("object"); - }); -}); - -describe("generateClassNames", () => { - class ApplyClassNameComponent extends Foundation { - public render(): JSX.Element { - return
Hello World
; - } - } - - let applyClassNameWithEmptyComponentClasses: ApplyClassNameComponent; - let applyClassNameWithProps: ApplyClassNameComponent; - let applyClassNameWithComponentClasses: ApplyClassNameComponent; - - beforeEach((): void => { - applyClassNameWithEmptyComponentClasses = new ReactTestUtils.renderIntoDocument( - - ); - applyClassNameWithProps = new ReactTestUtils.renderIntoDocument( - - ); - applyClassNameWithComponentClasses = new ReactTestUtils.renderIntoDocument( - - ); - }); - - test("should return null if props are undefined and componentClasses is not a string", () => { - expect(applyClassNameWithEmptyComponentClasses["generateClassNames"]()).toBe( - null - ); - }); - - test("should return null if componentClasses are not a string and no className prop is passed", () => { - expect(applyClassNameWithProps["generateClassNames"]()).toBe(null); - }); - - test("should return componentClasses if componentClasses is a string and no props are passed", () => { - expect( - applyClassNameWithEmptyComponentClasses["generateClassNames"]( - "component-classes" - ) - ).toBe("component-classes"); - }); - - test("should return componentClasses if componentClasses is a string and no className prop is passed", () => { - expect(applyClassNameWithProps["generateClassNames"]("component-classes")).toBe( - "component-classes" - ); - }); - - test("should combine component classes and className props if both are passed", () => { - expect( - applyClassNameWithComponentClasses["generateClassNames"]("component-classes") - ).toBe("component-classes custom-class-name"); - expect( - applyClassNameWithComponentClasses["generateClassNames"](" component-classes") - ).toBe("component-classes custom-class-name"); - expect( - applyClassNameWithComponentClasses["generateClassNames"]( - " component-classes " - ) - ).toBe("component-classes custom-class-name"); - expect( - applyClassNameWithComponentClasses["generateClassNames"]( - " component-classes " - ) - ).toBe("component-classes custom-class-name"); - expect( - new ReactTestUtils.renderIntoDocument( - - )["generateClassNames"](" component-classes ") - ).toBe("component-classes custom-class-name"); - }); -}); - -describe("withSlot", () => { - class WithSlotTestComponent extends Foundation<{}, {}, {}> { - public render(): React.ReactNode { - return this.props.children || "hello world"; - } - } - - test("should not throw if no props are passed", () => { - const Component: WithSlotTestComponent = new ReactTestUtils.renderIntoDocument( - - ); - - expect(() => { - Component["withSlot"]("test"); - }).not.toThrow(); - }); - - test("should return an empty array if no slot matches are found", () => { - const Component: WithSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
- - ) - ); - - expect(Component["withSlot"]("test")).toHaveLength(0); - }); - - test("should return an array of all children that have a slot prop matching the provided slot", () => { - const Component: WithSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
-
-
- - ) - ); - - expect(Component["withSlot"]("test")).toHaveLength(2); - }); - - test("should operate on input nodes if they are provided", () => { - const nodes: React.ReactNode[] = [ - , - , - , - , - ]; - - const Component: WithSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
{nodes}
-
- - ) - ); - - expect(Component["withSlot"]("test", nodes)).toHaveLength(3); - }); - - test("should accept an array of slots", () => { - const Component: WithSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
-
- - ) - ); - - expect(Component["withSlot"](["foo", "bar"])).toHaveLength(2); - }); -}); - -describe("withoutSlot", () => { - class WithoutSlotTestComponent extends Foundation<{}, {}, {}> { - public render(): React.ReactNode { - return this.props.children || "hello world"; - } - } - - test("should not throw if no props are passed", () => { - const Component: WithoutSlotTestComponent = new ReactTestUtils.renderIntoDocument( - - ); - - expect(() => { - Component["withoutSlot"]("test"); - }).not.toThrow(); - }); - - test("should return all elements no slot matches are found", () => { - const Component: WithoutSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
- - ) - ); - - expect(Component["withoutSlot"]("test")).toHaveLength(2); - }); - - test("should return an array of all children that do not have a slot prop matching the provided slot", () => { - const Component: WithoutSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
-
-
- - ) - ); - - expect(Component["withoutSlot"]("test")).toHaveLength(2); - }); - - test("should operate on input nodes if they are provided", () => { - const nodes: React.ReactNode[] = [ - , - , - , - , - ]; - - const Component: WithoutSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
{nodes}
-
- - ) - ); - - expect(Component["withoutSlot"]("test", nodes)).toHaveLength(1); - }); - - test("should accept an array of slots", () => { - const Component: WithoutSlotTestComponent = new ReactTestUtils.renderIntoDocument( - ( - -
-
-
- - ) - ); - - expect(Component["withoutSlot"](["foo", "bar"])).toHaveLength(1); - }); -}); diff --git a/packages/react/fast-components-foundation-react/src/foundation/foundation.ts b/packages/react/fast-components-foundation-react/src/foundation/foundation.ts deleted file mode 100644 index 9163e14162c..00000000000 --- a/packages/react/fast-components-foundation-react/src/foundation/foundation.ts +++ /dev/null @@ -1,193 +0,0 @@ -import React from "react"; -import { get, isPlainObject, pick, set } from "lodash-es"; -import { FoundationProps } from "./foundation.props"; - -/** - * Describes the object that stores memoized reference resolver functions - */ -export interface ReferenceResolverStore { - [key: string]: ReferenceResolverStore | ReferenceResolver; -} - -/** - * Describes the object that stores all resolved react element and component references - */ -export interface ReferenceStore { - [key: string]: ReferenceStore | React.ReactNode; -} - -/** - * Describes the object that enumerates all handled props for a component. This - * object includes all props that are in some way consumed or manipulated by component - * code. These props will not be mapped onto the underlying root DOM node - */ -export type HandledProps = { [P in keyof T]: void }; - -/** - * Describes a function that that resolves a react reference element or component. - */ -export type ReferenceResolver = (reference: T) => void; - -/** - * The foundation component is the component that all fast base components are built on top of. It provides a common - * set of utilities that each component inherits. - * @param H - These are the props that are "handled". "handled" props are not mapped automatically to the root element - * returned by the render function. Use handled props to expose inputs that will not map directly to DOM attributes - * (eg a custom callback) or where the DOM attribute would be required. - * @param U - These are "unhandled" props. Any props from this interface will be mapped onto the root DOM node of the - * render function as-is. It is advised that these props map to valid HTML attributes - otherwise you will likely have HTML errors. - * @param S - The state interface of the component. - */ -abstract class Foundation extends React.Component { - /** - * The props that should never be passed to the root element by unhandled props - */ - private static defaultHandledProps: string[] = ["children"]; - - /** - * An enumeration of all handled props. All props passed to the component that are not enumerated here will be - * treated as unhandled props - */ - protected handledProps: HandledProps; - - /** - * Store all memoized ref callbacks so they can quickly be accessed. Storing the functions - * allows us to not create new ref functions every update cycle - */ - protected referenceResolverStore: ReferenceResolverStore = {}; - - /** - * Location where all react element and component references are stored - */ - protected referenceStore: ReferenceStore = {}; - - /** - * Stores a react ref callback under the path provided as arguments. Paths are resolved using lodash's get/set API. - * The reference object itself will be stored on the referenceStore under the path provided and can be accessed via - * the getRef method under the same path. - * - * Usage:
- */ - protected setRef(...args: Array): ReferenceResolver { - const storageKey: string = this.processStorageKey(args); - let resolverFunction: ReferenceResolver | ReferenceResolverStore = get( - this.referenceResolverStore, - storageKey - ); - - if ( - !storageKey || - isPlainObject(resolverFunction) || - Array.isArray(resolverFunction) - ) { - return; - } - - if (typeof resolverFunction === "function") { - return resolverFunction; - } else { - resolverFunction = (ref: React.ReactNode): void => { - set(this.referenceStore, storageKey, ref); - }; - - set(this.referenceResolverStore, storageKey, resolverFunction); - - return resolverFunction; - } - } - - /** - * Get a reference by key , where function arguments are used as to create the keyname, - * eg. getRef('foo', 'bar', 0) resolves to this.references.foo.bar[0]; - * - * Usage: const contentContainer = this.getRef("content-container"); - */ - protected getRef(...args: Array): React.ReactNode { - return get(this.referenceStore, this.processStorageKey(args)); - } - - /** - * Returns an object containing all props that are not enumerated as handledProps - */ - protected unhandledProps(): U { - const unhandledPropKeys: string[] = Object.keys(this.props).filter( - (key: string) => { - return ( - !(Foundation.defaultHandledProps.indexOf(key) > -1) && - this.handledProps && - !this.handledProps.hasOwnProperty(key) - ); - } - ); - - return pick(this.props, unhandledPropKeys) as U; - } - - /** - * Joins any string with the className prop passed to the component. Used for applying a className to the root - * element of a component's render function. - */ - protected generateClassNames(componentClasses: string = ""): string | null { - return ( - componentClasses - .concat(` ${this.props.className || ""}`) - .trim() - .replace(/(\s){2,}/g, " ") || null - ); - } - - /* - * Return an array of all nodes who's slot prop matches the provided slot. - * If no nodes are provided, `this.props.children` will be used - */ - protected withSlot( - slot: T | T[], - nodes: React.ReactNode = this.props.children - ): React.ReactNode { - return React.Children.map( - nodes, - (node: React.ReactNode): React.ReactNode | null => { - return this.hasSlot(slot, node) ? node : null; - } - ); - } - - protected withoutSlot( - slot: T | T[], - nodes: React.ReactNode = this.props.children - ): React.ReactNode { - return React.Children.map( - nodes, - (node: React.ReactNode): React.ReactNode | null => { - return !this.hasSlot(slot, node) ? node : null; - } - ); - } - - /** - * Determine if a single node has a slot property - */ - private hasSlot(slot: T | T[], node: React.ReactNode): boolean { - const nodeSlot: T = get(node, "props.slot"); - - return Array.isArray(slot) ? slot.indexOf(nodeSlot) !== -1 : slot === nodeSlot; - } - - /** - * Generates a string that conforms to object/array accessor syntax that can be used by lodash's get / set, - * eg. => ["foo", "bar", 0] => "foo[bar][0]" - */ - private processStorageKey(args: Array): string { - return args - .filter((item: string | number) => { - return typeof item === "string" || typeof item === "number"; - }) - .map((item: string | number, index: number) => { - return index === 0 ? item : `[${item}]`; - }) - .join(""); - } -} - -export default Foundation; -export { FoundationProps }; diff --git a/packages/react/fast-components-foundation-react/src/foundation/index.ts b/packages/react/fast-components-foundation-react/src/foundation/index.ts deleted file mode 100644 index f3c7f511c38..00000000000 --- a/packages/react/fast-components-foundation-react/src/foundation/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Foundation from "./foundation"; - -export default Foundation; -export * from "./foundation"; diff --git a/packages/react/fast-components-foundation-react/src/index.ts b/packages/react/fast-components-foundation-react/src/index.ts deleted file mode 100644 index fbdf6dd6d0c..00000000000 --- a/packages/react/fast-components-foundation-react/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Foundation from "./foundation"; -export default Foundation; -export * from "./foundation"; diff --git a/packages/react/fast-components-foundation-react/tsconfig.build.json b/packages/react/fast-components-foundation-react/tsconfig.build.json deleted file mode 100644 index ae89514e50b..00000000000 --- a/packages/react/fast-components-foundation-react/tsconfig.build.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": [ - "src/**/*" - ], - "exclude": [ - "node_modules", - "**/*.spec.ts", - "**/*.spec.tsx" - ] -} diff --git a/packages/react/fast-components-foundation-react/tsconfig.json b/packages/react/fast-components-foundation-react/tsconfig.json deleted file mode 100644 index 0446e02be86..00000000000 --- a/packages/react/fast-components-foundation-react/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "outDir": "./dist" - } -} diff --git a/packages/react/fast-components-react-base/.eslintignore b/packages/react/fast-components-react-base/.eslintignore deleted file mode 100644 index 4c6a15b9360..00000000000 --- a/packages/react/fast-components-react-base/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -# don't ever lint node_modules -node_modules -# don't lint build output (make sure it's set to your correct build folder name) -dist -# don't lint coverage output -coverage -# don't lint storybook -.storybook \ No newline at end of file diff --git a/packages/react/fast-components-react-base/.eslintrc.js b/packages/react/fast-components-react-base/.eslintrc.js deleted file mode 100644 index 31bd7aeef90..00000000000 --- a/packages/react/fast-components-react-base/.eslintrc.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - extends: ["@microsoft/eslint-config-fast-dna", "prettier"], - rules: { - "react/no-unescaped-entities": "off", - }, -}; diff --git a/packages/react/fast-components-react-base/.npmignore b/packages/react/fast-components-react-base/.npmignore deleted file mode 100644 index 5534a2018cd..00000000000 --- a/packages/react/fast-components-react-base/.npmignore +++ /dev/null @@ -1,15 +0,0 @@ -# Tests -__test__/ -*.spec.* -*.test.* - -# Source files -app/ -coverage/ -src/ -www/ - -# babel config -babel.config.js -tsconfig.json -webpack.config.js \ No newline at end of file diff --git a/packages/react/fast-components-react-base/.npmrc b/packages/react/fast-components-react-base/.npmrc deleted file mode 100644 index 43c97e719a5..00000000000 --- a/packages/react/fast-components-react-base/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/packages/react/fast-components-react-base/.prettierignore b/packages/react/fast-components-react-base/.prettierignore deleted file mode 100644 index b5be9aa3d22..00000000000 --- a/packages/react/fast-components-react-base/.prettierignore +++ /dev/null @@ -1,4 +0,0 @@ -coverage/* -dist/* -www/* -src/**/.tmp/ \ No newline at end of file diff --git a/packages/react/fast-components-react-base/.storybook/config.js b/packages/react/fast-components-react-base/.storybook/config.js deleted file mode 100644 index 7855ae82d58..00000000000 --- a/packages/react/fast-components-react-base/.storybook/config.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { configure, addParameters, addDecorator } from "@storybook/react"; -import { create, Global } from "@storybook/theming"; -// Import from dist cause storybook throws up if we import the named import from the index -import theme from "@microsoft/fast-storybook-presets/dist/theme"; - -addParameters({ - options: { - theme, - }, -}); diff --git a/packages/react/fast-components-react-base/.storybook/presets.js b/packages/react/fast-components-react-base/.storybook/presets.js deleted file mode 100644 index b135b8b2049..00000000000 --- a/packages/react/fast-components-react-base/.storybook/presets.js +++ /dev/null @@ -1,22 +0,0 @@ -const path = require("path"); - -module.exports = [ - { - name: "@storybook/preset-typescript", - options: { - tsLoaderOptions: { - compilerOptions: { - declaration: false, - }, - }, - }, - }, - { - name: "@microsoft/fast-storybook-presets", - options: { - designSystemAddon: { - enabled: false, - }, - }, - }, -]; diff --git a/packages/react/fast-components-react-base/CHANGELOG.md b/packages/react/fast-components-react-base/CHANGELOG.md deleted file mode 100644 index 6ccb8e55459..00000000000 --- a/packages/react/fast-components-react-base/CHANGELOG.md +++ /dev/null @@ -1,1543 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [4.27.0](https://github.com/microsoft/fast-react/compare/@microsoft/fast-components-react-base@4.26.4...@microsoft/fast-components-react-base@4.27.0) (2020-07-14) - - -### Bug Fixes - -* update repo URL to be the soon-to-be archived repo for React packages ([#3498](https://github.com/microsoft/fast-react/issues/3498)) ([693d7fd](https://github.com/microsoft/fast-react/commit/693d7fd70823fbc9cc13d502764dbef8faf27e6f)) - - -### Features - -* update typescript version and remove utility types dependencies for react packages ([#3422](https://github.com/microsoft/fast-react/issues/3422)) ([09d07b5](https://github.com/microsoft/fast-react/commit/09d07b580cda3bcc5d28f83d3568521f710c9576)) - - - - - -## [4.26.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.26.3...@microsoft/fast-components-react-base@4.26.4) (2020-07-02) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.26.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.26.2...@microsoft/fast-components-react-base@4.26.3) (2020-06-26) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.26.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.26.1...@microsoft/fast-components-react-base@4.26.2) (2020-06-15) - - -### Bug Fixes - -* react datagrid - don't unnecessarily hardcode layout panel ([#3285](https://github.com/Microsoft/fast/issues/3285)) ([c3678f6](https://github.com/Microsoft/fast/commit/c3678f684c09145d194367153c6839280f33730a)) - - - - - -# [4.26.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.11...@microsoft/fast-components-react-base@4.26.0) (2020-06-05) - - -### Bug Fixes - -* stackpanel should not throw when itemspan list is too short ([#3151](https://github.com/Microsoft/fast/issues/3151)) ([36ff031](https://github.com/Microsoft/fast/commit/36ff031303431285c350dd5bb6ed5c0359aea74f)) - - -### Features - -* add data grid to base React component set ([#3158](https://github.com/Microsoft/fast/issues/3158)) ([d2e7ead](https://github.com/Microsoft/fast/commit/d2e7ead60e7973cead222843899829f879b67da0)) -* add first class prop for aria-label to radio and checkbox ([#3163](https://github.com/Microsoft/fast/issues/3163)) ([7322b89](https://github.com/Microsoft/fast/commit/7322b896c1a3794eb32f2261a28a522f66f7979f)) - - - - - -## [4.25.11](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.10...@microsoft/fast-components-react-base@4.25.11) (2020-05-18) - - -### Bug Fixes - -* add aria-expanded state to auto-suggest input ([#3071](https://github.com/Microsoft/fast/issues/3071)) ([5701e00](https://github.com/Microsoft/fast/commit/5701e001a8baa80c46bdcaac083b938914bec9c1)) -* select root should not be focusable ([#2980](https://github.com/Microsoft/fast/issues/2980)) ([c166f4b](https://github.com/Microsoft/fast/commit/c166f4b1a1b8509457d6df5ba787f0fcf6ea73f0)) -* update to unblock CI failures by prettier ([#3057](https://github.com/Microsoft/fast/issues/3057)) ([1776c07](https://github.com/Microsoft/fast/commit/1776c0757b869fbd9fc0edac68d0d1d2bedd6a78)) - - - - - -## [4.25.10](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.9...@microsoft/fast-components-react-base@4.25.10) (2020-04-29) - - -### Bug Fixes - -* update tooling dependencies ([#3031](https://github.com/Microsoft/fast/issues/3031)) ([2e286e7](https://github.com/Microsoft/fast/commit/2e286e77e870032391dcb5572f7cbc92f53e90e1)) - - - - - -## [4.25.9](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.8...@microsoft/fast-components-react-base@4.25.9) (2020-04-27) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.25.8](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.7...@microsoft/fast-components-react-base@4.25.8) (2020-04-22) - - -### Bug Fixes - -* update select to pass onClick and onKeydown events ([#2910](https://github.com/Microsoft/fast/issues/2910)) ([13be296](https://github.com/Microsoft/fast/commit/13be29605a214bdc3f928b19e226fb4cd0bd0e1d)) - - - - - -## [4.25.7](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.6...@microsoft/fast-components-react-base@4.25.7) (2020-04-10) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.25.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.5...@microsoft/fast-components-react-base@4.25.6) (2020-04-02) - - -### Bug Fixes - -* correct tabs interaction model to map to the w3c specification and add default orientation ([#2858](https://github.com/Microsoft/fast/issues/2858)) ([1f51ac4](https://github.com/Microsoft/fast/commit/1f51ac4b75750c4ac25f7dc5c56440c8cd9bf281)) - - - - - -## [4.25.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.4...@microsoft/fast-components-react-base@4.25.5) (2020-03-30) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.25.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.3...@microsoft/fast-components-react-base@4.25.4) (2020-03-25) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.25.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.2...@microsoft/fast-components-react-base@4.25.3) (2020-03-25) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.25.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.1...@microsoft/fast-components-react-base@4.25.2) (2020-03-18) - - -### Bug Fixes - -* ensure null values are removed from tabs ([#2805](https://github.com/Microsoft/fast/issues/2805)) ([5c032d0](https://github.com/Microsoft/fast/commit/5c032d0)) -* update horizontal overflow to properly initialize flipper hydration ([#2801](https://github.com/Microsoft/fast/issues/2801)) ([4b427bd](https://github.com/Microsoft/fast/commit/4b427bd)) - - - - - -## [4.25.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.25.0...@microsoft/fast-components-react-base@4.25.1) (2020-03-13) - - -### Bug Fixes - -* auto suggest menu opens with new suggestions and closes on blur ([#2699](https://github.com/Microsoft/fast/issues/2699)) ([0314653](https://github.com/Microsoft/fast/commit/0314653)) - - - - - -# [4.25.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.24.2...@microsoft/fast-components-react-base@4.25.0) (2020-02-28) - - -### Bug Fixes - -* select "aria-labelledby" should never be"undefined" string, remove "aria-live" tag ([#2650](https://github.com/Microsoft/fast/issues/2650)) ([9ed0124](https://github.com/Microsoft/fast/commit/9ed0124)) -* select calls preventDefault on trigger click ([#2663](https://github.com/Microsoft/fast/issues/2663)) ([147deab](https://github.com/Microsoft/fast/commit/147deab)) - - -### Features - -* add fixed height to horizontal overflow ([#2692](https://github.com/Microsoft/fast/issues/2692)) ([8ca3695](https://github.com/Microsoft/fast/commit/8ca3695)) -* viewport positioner enable delayed instanciation ([#2654](https://github.com/Microsoft/fast/issues/2654)) ([e81991a](https://github.com/Microsoft/fast/commit/e81991a)) - - - - - -## [4.24.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.24.1...@microsoft/fast-components-react-base@4.24.2) (2020-02-07) - - -### Bug Fixes - -* select - add css class for scaleToFit mode ([#2626](https://github.com/Microsoft/fast/issues/2626)) ([15c7a50](https://github.com/Microsoft/fast/commit/15c7a50ef336e4531261ce1fe6be3695c9533243)) - - - - - -## [4.24.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.24.0...@microsoft/fast-components-react-base@4.24.1) (2020-01-29) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.24.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.6...@microsoft/fast-components-react-base@4.24.0) (2020-01-27) - - -### Bug Fixes - -* prevent default on tabs component navigation ([#2617](https://github.com/Microsoft/fast/issues/2617)) ([73e3706](https://github.com/Microsoft/fast/commit/73e37064c628f5cb6c3cf6d350defb9d3a1dbf8d)) - - -### Features - -* add aria-modal attribute to modal dialogs ([#2621](https://github.com/Microsoft/fast/issues/2621)) ([765b886](https://github.com/Microsoft/fast/commit/765b88642fbe06ac6253e9f51579a5ca89a1cb99)) -* Add focusTargetOnClose prop to dialog component ([#2603](https://github.com/Microsoft/fast/issues/2603)) ([8134ce5](https://github.com/Microsoft/fast/commit/8134ce55b69668959033114575b8c600b6a34bf2)) -* move extractElementFromRef function to utilities ([#2613](https://github.com/Microsoft/fast/issues/2613)) ([f012600](https://github.com/Microsoft/fast/commit/f0126008cfa78adc63eced2e7639e8b6fa3162d7)) - - - - - -## [4.23.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.5...@microsoft/fast-components-react-base@4.23.6) (2020-01-24) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.23.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.4...@microsoft/fast-components-react-base@4.23.5) (2020-01-21) - - -### Bug Fixes - -* viewport positioner resets on anchor change ([#2538](https://github.com/Microsoft/fast/issues/2538)) ([460d686](https://github.com/Microsoft/fast/commit/460d68625dedc4df305e543e14f5f705083d0d69)) - - - - - -## [4.23.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.3...@microsoft/fast-components-react-base@4.23.4) (2020-01-09) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.23.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.2...@microsoft/fast-components-react-base@4.23.3) (2020-01-07) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.23.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.1...@microsoft/fast-components-react-base@4.23.2) (2020-01-07) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.23.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.23.0...@microsoft/fast-components-react-base@4.23.1) (2020-01-06) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.23.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.22.2...@microsoft/fast-components-react-base@4.23.0) (2019-12-23) - - -### Features - -* add tree view as a new component ([#2510](https://github.com/Microsoft/fast/issues/2510)) ([1a1d465](https://github.com/Microsoft/fast/commit/1a1d46566dc6c378a0f1981341a36dcb9897226f)) - - - - - -## [4.22.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.22.1...@microsoft/fast-components-react-base@4.22.2) (2019-12-18) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.22.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.22.0...@microsoft/fast-components-react-base@4.22.1) (2019-12-13) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.22.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.21.1...@microsoft/fast-components-react-base@4.22.0) (2019-12-13) - - -### Features - -* horizontal overflow smooth scrolling ([#2492](https://github.com/Microsoft/fast/issues/2492)) ([5ab1a8e](https://github.com/Microsoft/fast/commit/5ab1a8e597742c7ad2833fa8c593d8fb5ab5ac14)) - - - - - -## [4.21.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.21.0...@microsoft/fast-components-react-base@4.21.1) (2019-12-11) - - -### Bug Fixes - -* adjust select Aria ([#2457](https://github.com/Microsoft/fast/issues/2457)) ([d66b3df](https://github.com/Microsoft/fast/commit/d66b3df5e295640706a010c01cfddca00ffdb8ba)) -* modal dialogs do not move focus if already within ([#2498](https://github.com/Microsoft/fast/issues/2498)) ([ed1b707](https://github.com/Microsoft/fast/commit/ed1b7075ab799a411c2b31524a0b468110445b1b)) -* simplify viewport-positioner flicker avoidance logic and remove dom ref ([#2467](https://github.com/Microsoft/fast/issues/2467)) ([c508b04](https://github.com/Microsoft/fast/commit/c508b045bfa1842b372d8a4b2c47d0b91fac674f)) -* update horizontal-overflow default height to null instead of 0px ([#2472](https://github.com/Microsoft/fast/issues/2472)) ([ac52c4a](https://github.com/Microsoft/fast/commit/ac52c4a2aaff5f1934f1c166641ad0ee4c71c041)) - - - - - -# [4.21.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.20.0...@microsoft/fast-components-react-base@4.21.0) (2019-12-05) - - -### Bug Fixes - -* horizontal overflow position data error, add test ([#2471](https://github.com/Microsoft/fast/issues/2471)) ([631f88b](https://github.com/Microsoft/fast/commit/631f88ba364226362860547c751a83fe13c4ed2a)) -* delay rendering slider internals until after direction check ([#2441](https://github.com/Microsoft/fast/issues/2441)) ([52bb0c2](https://github.com/Microsoft/fast/commit/52bb0c20dc680c1b2de8d865a8c58acb6d38c34a)) -* horizontal overflow rtl scroll behavior and add rtl scrollLeft utility ([#2462](https://github.com/Microsoft/fast/issues/2462)) ([0cc2da5](https://github.com/Microsoft/fast/commit/0cc2da5fde2abe23da987c216e03d73370cd4ad3)) - - -### Features - -* add filtering and onFocus to autoSuggest ([#2466](https://github.com/Microsoft/fast/issues/2466)) ([2aa55de](https://github.com/Microsoft/fast/commit/2aa55de4ba4fd2ca95756bcc733d891f836ed744)) -* add name prop to toggle ([#2488](https://github.com/Microsoft/fast/issues/2488)) ([854dc14](https://github.com/Microsoft/fast/commit/854dc14b9c5405cd84ec51fd9a2ab9a65e3f9cc0)) - - - - - -# [4.20.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.19.1...@microsoft/fast-components-react-base@4.20.0) (2019-11-19) - - -### Bug Fixes - -* improve select aria ([#2393](https://github.com/Microsoft/fast/issues/2393)) ([59a790b](https://github.com/Microsoft/fast/commit/59a790b39f8fa63b93acf2f42edb3c7fff630288)) -* modal dialog now blocks touch events ([#2401](https://github.com/Microsoft/fast/issues/2401)) ([2c5501f](https://github.com/Microsoft/fast/commit/2c5501f6f607ecb4fd9d07768878fbde7b5006a2)) -* update stories, read me, and schema in slider ([#2410](https://github.com/Microsoft/fast/issues/2410)) ([d672080](https://github.com/Microsoft/fast/commit/d67208088eb48542f77ff626d48672963dd60194)) - - -### Features - -* update React peer dependencies ([6ac2327](https://github.com/Microsoft/fast/commit/6ac232744a4c2a7c2ce903b6719213ded838d557)) - - -### Reverts - -* "fix: improve select aria ([#2393](https://github.com/Microsoft/fast/issues/2393))" ([#2455](https://github.com/Microsoft/fast/issues/2455)) ([36890d4](https://github.com/Microsoft/fast/commit/36890d4ca4d4ce9abe6444ac21ed8924357b64b8)) - - - - - -## [4.19.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.19.0...@microsoft/fast-components-react-base@4.19.1) (2019-11-11) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.19.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.18.3...@microsoft/fast-components-react-base@4.19.0) (2019-11-07) - - -### Bug Fixes - -* modal dialogs actively take focus ([#2319](https://github.com/Microsoft/fast/issues/2319)) ([920ceb3](https://github.com/Microsoft/fast/commit/920ceb3e33d388a056c072c77ce70805972e30e3)) -* slider can miss dir setting on initial render. ([#2399](https://github.com/Microsoft/fast/issues/2399)) ([8ea0222](https://github.com/Microsoft/fast/commit/8ea022285c4cdb38a01778a3af71b6f01d6691cc)) - - -### Features - -* add viewport context ([#2359](https://github.com/Microsoft/fast/issues/2359)) ([fab852e](https://github.com/Microsoft/fast/commit/fab852e825dca642182621980d9ea2f90964b206)) -* select class and style support for scaling menus ([#2397](https://github.com/Microsoft/fast/issues/2397)) ([d9b4c84](https://github.com/Microsoft/fast/commit/d9b4c841e38dcf837f0159cf9928cceda0bb9de8)) - - - - - -## [4.18.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.18.2...@microsoft/fast-components-react-base@4.18.3) (2019-10-25) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.18.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.18.1...@microsoft/fast-components-react-base@4.18.2) (2019-10-24) - - -### Bug Fixes - -* refactor hypertext ([#2365](https://github.com/Microsoft/fast/issues/2365)) ([a440636](https://github.com/Microsoft/fast/commit/a440636974d255818634faf3fcfa5ac55ed47ae4)) - - - - - -## [4.18.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.18.0...@microsoft/fast-components-react-base@4.18.1) (2019-10-18) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.18.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.17.0...@microsoft/fast-components-react-base@4.18.0) (2019-10-17) - - -### Features - -* add dynamic scaling capability to viewport positioner ([#2290](https://github.com/Microsoft/fast/issues/2290)) ([45eb5b7](https://github.com/Microsoft/fast/commit/45eb5b7)) - - - - - -# [4.17.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.16.2...@microsoft/fast-components-react-base@4.17.0) (2019-10-16) - - -### Bug Fixes - -* allow tabbing away from controlled auto-suggest without opening menu ([#2310](https://github.com/Microsoft/fast/issues/2310)) ([a5f5a99](https://github.com/Microsoft/fast/commit/a5f5a99)) -* viewport positioner adds incorrect classnames ([#2328](https://github.com/Microsoft/fast/issues/2328)) ([81e6ed5](https://github.com/Microsoft/fast/commit/81e6ed5)) - - -### Features - -* add viewport positioner to select menu ([#2263](https://github.com/Microsoft/fast/issues/2263)) ([af5f04a](https://github.com/Microsoft/fast/commit/af5f04a)) - - - - - -## [4.16.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.16.1...@microsoft/fast-components-react-base@4.16.2) (2019-10-07) - - -### Bug Fixes - -* select menu root select tabindex to -1 ([#2289](https://github.com/Microsoft/fast/issues/2289)) ([e5221ff](https://github.com/Microsoft/fast/commit/e5221ff)) - - - - - -## [4.16.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.16.0...@microsoft/fast-components-react-base@4.16.1) (2019-10-07) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.16.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.6...@microsoft/fast-components-react-base@4.16.0) (2019-10-02) - - -### Bug Fixes - -* enable home and end keys on slider ([#2253](https://github.com/Microsoft/fast/issues/2253)) ([bb18f19](https://github.com/Microsoft/fast/commit/bb18f19)) -* improve select narrator behavior ([#2249](https://github.com/Microsoft/fast/issues/2249)) ([42cdec0](https://github.com/Microsoft/fast/commit/42cdec0)) - - -### Features - -* support custom menu render functions in Select ([#2274](https://github.com/Microsoft/fast/issues/2274)) ([64e3976](https://github.com/Microsoft/fast/commit/64e3976)) - - - - - -## [4.15.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.5...@microsoft/fast-components-react-base@4.15.6) (2019-09-25) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.15.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.4...@microsoft/fast-components-react-base@4.15.5) (2019-09-18) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.15.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.3...@microsoft/fast-components-react-base@4.15.4) (2019-09-17) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.15.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.2...@microsoft/fast-components-react-base@4.15.3) (2019-09-10) - - -### Bug Fixes - -* Enable slider touch dragging ([#2213](https://github.com/Microsoft/fast/issues/2213)) ([70983fa](https://github.com/Microsoft/fast/commit/70983fa)) - - - - - -## [4.15.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.1...@microsoft/fast-components-react-base@4.15.2) (2019-09-09) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.15.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.15.0...@microsoft/fast-components-react-base@4.15.1) (2019-09-05) - - -### Bug Fixes - -* improve slider thumb animations ([#2187](https://github.com/Microsoft/fast/issues/2187)) ([71ffcd8](https://github.com/Microsoft/fast/commit/71ffcd8)) - - - - - -# [4.15.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.14.3...@microsoft/fast-components-react-base@4.15.0) (2019-08-29) - - -### Features - -* add render prop for label instead of slot in radio ([#2149](https://github.com/Microsoft/fast/issues/2149)) ([d5fe9df](https://github.com/Microsoft/fast/commit/d5fe9df)) - - - - - -## [4.14.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.14.2...@microsoft/fast-components-react-base@4.14.3) (2019-08-24) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.14.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.14.1...@microsoft/fast-components-react-base@4.14.2) (2019-08-22) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.14.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.14.0...@microsoft/fast-components-react-base@4.14.1) (2019-08-22) - - -### Bug Fixes - -* define defaultProps type of radio correctly ([#2172](https://github.com/Microsoft/fast/issues/2172)) ([6236dfd](https://github.com/Microsoft/fast/commit/6236dfd)) - - - - - -# [4.14.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.13.0...@microsoft/fast-components-react-base@4.14.0) (2019-08-22) - - -### Bug Fixes - -* check classNames for checkbox state indicator and input using utility ([#2170](https://github.com/Microsoft/fast/issues/2170)) ([774f514](https://github.com/Microsoft/fast/commit/774f514)) -* correct type value for radio on change ([#2167](https://github.com/Microsoft/fast/issues/2167)) ([741760d](https://github.com/Microsoft/fast/commit/741760d)) - - -### Features - -* add label prop to replace slots in checkbox ([#2142](https://github.com/Microsoft/fast/issues/2142)) ([240e3b7](https://github.com/Microsoft/fast/commit/240e3b7)) - - - - - -# [4.13.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.6...@microsoft/fast-components-react-base@4.13.0) (2019-08-22) - - -### Bug Fixes - -* correct typing of radio unhandled props ([#2148](https://github.com/Microsoft/fast/issues/2148)) ([48b14e7](https://github.com/Microsoft/fast/commit/48b14e7)) - - -### Features - -* adds classNames utility ([#2163](https://github.com/Microsoft/fast/issues/2163)) ([d6a872d](https://github.com/Microsoft/fast/commit/d6a872d)) -* export individual keycodes as named exports and unreference KeyCodes ([327d806](https://github.com/Microsoft/fast/commit/327d806)) -* support navigating select options using arrow keys without opening menu ([#2143](https://github.com/Microsoft/fast/issues/2143)) ([9161832](https://github.com/Microsoft/fast/commit/9161832)) - - - - - -## [4.12.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.5...@microsoft/fast-components-react-base@4.12.6) (2019-08-16) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.12.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.4...@microsoft/fast-components-react-base@4.12.5) (2019-08-14) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.12.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.3...@microsoft/fast-components-react-base@4.12.4) (2019-08-09) - - -### Bug Fixes - -* export observer support code from base package ([#2117](https://github.com/Microsoft/fast/issues/2117)) ([e10ec21](https://github.com/Microsoft/fast/commit/e10ec21)) -* resolve issues with viewport positioner no-observer mode ([#2111](https://github.com/Microsoft/fast/issues/2111)) ([a338449](https://github.com/Microsoft/fast/commit/a338449)) -* slider moves to nearest increment on click ([#2119](https://github.com/Microsoft/fast/issues/2119)) ([139a649](https://github.com/Microsoft/fast/commit/139a649)) - - - - - -## [4.12.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.2...@microsoft/fast-components-react-base@4.12.3) (2019-08-01) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.12.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.1...@microsoft/fast-components-react-base@4.12.2) (2019-08-01) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.12.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.12.0...@microsoft/fast-components-react-base@4.12.1) (2019-08-01) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.12.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.11.3...@microsoft/fast-components-react-base@4.12.0) (2019-07-31) - - -### Bug Fixes - -* add flag to autosuggest onValueChange event to label when change is from a suggested option ([#2002](https://github.com/Microsoft/fast/issues/2002)) ([f468c33](https://github.com/Microsoft/fast/commit/f468c33)) - - -### Features - -* add slider display value converter ([#1986](https://github.com/Microsoft/fast/issues/1986)) ([c08fb97](https://github.com/Microsoft/fast/commit/c08fb97)) - - - - - -## [4.11.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.11.2...@microsoft/fast-components-react-base@4.11.3) (2019-07-24) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.11.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.11.1...@microsoft/fast-components-react-base@4.11.2) (2019-07-24) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.11.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.11.0...@microsoft/fast-components-react-base@4.11.1) (2019-07-23) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.11.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.10.0...@microsoft/fast-components-react-base@4.11.0) (2019-07-23) - - -### Bug Fixes - -* [toggle] make selected & unselected messages optional ([#1973](https://github.com/Microsoft/fast/issues/1973)) ([5b79a4c](https://github.com/Microsoft/fast/commit/5b79a4c)) - - -### Features - -* improve viewport positioner offset correction ([#1978](https://github.com/Microsoft/fast/issues/1978)) ([b9d34ef](https://github.com/Microsoft/fast/commit/b9d34ef)) - - - - - -# [4.10.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.9.0...@microsoft/fast-components-react-base@4.10.0) (2019-07-16) - - -### Bug Fixes - -* ensure unhandled props are passed first and merge with existing style properties ([#1962](https://github.com/Microsoft/fast/issues/1962)) ([6e1170a](https://github.com/Microsoft/fast/commit/6e1170a)) -* slider & subheading schemas are incorrect ([#1961](https://github.com/Microsoft/fast/issues/1961)) ([b440051](https://github.com/Microsoft/fast/commit/b440051)) - - -### Features - -* add storybook to component libraries and a private package for component documentation ([#1928](https://github.com/Microsoft/fast/issues/1928)) ([179fa9d](https://github.com/Microsoft/fast/commit/179fa9d)) - - - - - -# [4.9.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.8.1...@microsoft/fast-components-react-base@4.9.0) (2019-07-09) - - -### Bug Fixes - -* slider thumb should be focused on click ([#1906](https://github.com/Microsoft/fast/issues/1906)) ([22c2bb4](https://github.com/Microsoft/fast/commit/22c2bb4)) - - -### Features - -* add autoplay support for carousel as a controlled behavior ([#1921](https://github.com/Microsoft/fast/issues/1921)) ([eabbf7b](https://github.com/Microsoft/fast/commit/eabbf7b)) - - - - - -## [4.8.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.8.0...@microsoft/fast-components-react-base@4.8.1) (2019-07-01) - - -### Bug Fixes - -* enable viewport postioner to correct for base position offset from anchor ([#1903](https://github.com/Microsoft/fast/issues/1903)) ([cca9871](https://github.com/Microsoft/fast/commit/cca9871)) - - - - - -# [4.8.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.7.0...@microsoft/fast-components-react-base@4.8.0) (2019-06-25) - - -### Features - -* converted the app schemas to typescript, removed typings file and related schema scripts. ([#1869](https://github.com/Microsoft/fast/issues/1869)) ([f7c29da](https://github.com/Microsoft/fast/commit/f7c29da)) - - - - - -# [4.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.6.1...@microsoft/fast-components-react-base@4.7.0) (2019-06-17) - - -### Features - -* convert schema files to .ts in base component package ([#1851](https://github.com/Microsoft/fast/issues/1851)) ([2029e89](https://github.com/Microsoft/fast/commit/2029e89)) - - - - - -## [4.6.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.6.0...@microsoft/fast-components-react-base@4.6.1) (2019-06-12) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.6.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.6...@microsoft/fast-components-react-base@4.6.0) (2019-06-11) - - -### Bug Fixes - -* add missing viewport positioner export ([#1844](https://github.com/Microsoft/fast/issues/1844)) ([c0b10dc](https://github.com/Microsoft/fast/commit/c0b10dc)) - - -### Features - -* add viewport positioner component ([#1781](https://github.com/Microsoft/fast/issues/1781)) ([a45dda6](https://github.com/Microsoft/fast/commit/a45dda6)) - - - - - -## [4.5.6](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.5...@microsoft/fast-components-react-base@4.5.6) (2019-06-07) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.5.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.4...@microsoft/fast-components-react-base@4.5.5) (2019-06-05) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.5.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.3...@microsoft/fast-components-react-base@4.5.4) (2019-06-05) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.5.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.2...@microsoft/fast-components-react-base@4.5.3) (2019-06-05) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.5.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.1...@microsoft/fast-components-react-base@4.5.2) (2019-05-31) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.5.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.5.0...@microsoft/fast-components-react-base@4.5.1) (2019-05-17) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.5.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.4.2...@microsoft/fast-components-react-base@4.5.0) (2019-05-17) - - -### Bug Fixes - -* update slider to support density and other minor style polish ([#1739](https://github.com/Microsoft/fast/issues/1739)) ([f3a1ba0](https://github.com/Microsoft/fast/commit/f3a1ba0)) - - -### Features - -* adding value attribute to radio and checkbox ([#1745](https://github.com/Microsoft/fast/issues/1745)) ([4b476f6](https://github.com/Microsoft/fast/commit/4b476f6)) - - - - - -## [4.4.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.4.1...@microsoft/fast-components-react-base@4.4.2) (2019-05-08) - - -### Bug Fixes - -* schemas should use examples as arrays ([#1726](https://github.com/Microsoft/fast/issues/1726)) ([2fa0392](https://github.com/Microsoft/fast/commit/2fa0392)) - - - - - -## [4.4.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.4.0...@microsoft/fast-components-react-base@4.4.1) (2019-05-01) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.3.1...@microsoft/fast-components-react-base@4.4.0) (2019-04-26) - - -### Features - -* add slider component ([#1676](https://github.com/Microsoft/fast/issues/1676)) ([6eded38](https://github.com/Microsoft/fast/commit/6eded38)) - - - - - -## [4.3.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.3.0...@microsoft/fast-components-react-base@4.3.1) (2019-04-23) - - -### Bug Fixes - -* correct radio schema to show inputId as required property ([#1703](https://github.com/Microsoft/fast/issues/1703)) ([c4f4a4c](https://github.com/Microsoft/fast/commit/c4f4a4c)) - - - - - -# [4.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.2.2...@microsoft/fast-components-react-base@4.3.0) (2019-04-23) - - -### Bug Fixes - -* supplied onKeyDown prop not called by context menu ([#1702](https://github.com/Microsoft/fast/issues/1702)) ([d676be6](https://github.com/Microsoft/fast/commit/d676be6)) - - -### Features - -* reduce dependency on peer dependencies ([#1669](https://github.com/Microsoft/fast/issues/1669)) ([cc06b10](https://github.com/Microsoft/fast/commit/cc06b10)) - - - - - -## [4.2.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.2.1...@microsoft/fast-components-react-base@4.2.2) (2019-04-17) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.2.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.2.0...@microsoft/fast-components-react-base@4.2.1) (2019-04-17) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.2.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.5...@microsoft/fast-components-react-base@4.2.0) (2019-04-15) - - -### Features - -* add name attribute to radio component ([#1642](https://github.com/Microsoft/fast/issues/1642)) ([cb8390e](https://github.com/Microsoft/fast/commit/cb8390e)) -* add name prop to checkbox ([#1643](https://github.com/Microsoft/fast/issues/1643)) ([913afaa](https://github.com/Microsoft/fast/commit/913afaa)) - - - - - -## [4.1.5](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.4...@microsoft/fast-components-react-base@4.1.5) (2019-04-11) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.1.4](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.3...@microsoft/fast-components-react-base@4.1.4) (2019-04-10) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.1.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.2...@microsoft/fast-components-react-base@4.1.3) (2019-04-09) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -## [4.1.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.1...@microsoft/fast-components-react-base@4.1.2) (2019-04-09) - - -### Bug Fixes - -* updates the allowed children ids for the context menu component ([#1628](https://github.com/Microsoft/fast/issues/1628)) ([bb12b66](https://github.com/Microsoft/fast/commit/bb12b66)) - - - - - -## [4.1.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.1.0...@microsoft/fast-components-react-base@4.1.1) (2019-04-03) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.1.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.0.1...@microsoft/fast-components-react-base@4.1.0) (2019-04-03) - - -### Features - -* invoke context-menu-item from right click [#1604](https://github.com/Microsoft/fast/issues/1604) ([5ae0487](https://github.com/Microsoft/fast/commit/5ae0487)) - - - - - -## [4.0.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@4.0.0...@microsoft/fast-components-react-base@4.0.1) (2019-03-25) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [4.0.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.11.1...@microsoft/fast-components-react-base@4.0.0) (2019-03-25) - - -### Bug Fixes - -* update to use esModuleInterop in the TypeScript configuration files ([#1211](https://github.com/Microsoft/fast/issues/1211)) ([2ec0644](https://github.com/Microsoft/fast/commit/2ec0644)) - - -### Features - -* add form plugin ids to schemas in component libraries ([#1548](https://github.com/Microsoft/fast/issues/1548)) ([f56a97c](https://github.com/Microsoft/fast/commit/f56a97c)) -* audit and update component handled and unhandled prop contracts ([#1417](https://github.com/Microsoft/fast/issues/1417)) ([6cdd63f](https://github.com/Microsoft/fast/commit/6cdd63f)) -* remove fast-application-utilities package ([#1455](https://github.com/Microsoft/fast/issues/1455)) ([7ee34fa](https://github.com/Microsoft/fast/commit/7ee34fa)) -* rename component display names, update directory export tests ([#1572](https://github.com/Microsoft/fast/issues/1572)) ([52953ce](https://github.com/Microsoft/fast/commit/52953ce)) -* update namespace component schema id's to prevent conflicts ([#1444](https://github.com/Microsoft/fast/issues/1444)) ([0828a59](https://github.com/Microsoft/fast/commit/0828a59)) -* update the dependencies of the development site ([#1545](https://github.com/Microsoft/fast/issues/1545)) ([9475fa2](https://github.com/Microsoft/fast/commit/9475fa2)) - - -### BREAKING CHANGES - -* Component display names are now prefixed to improve discoverability -* schema ids are now namespaced to prevent conflicts -* removal of fast-application-utilities-package -* Significant API changes to component handled and unhandled prop contracts. -* This will affect how imports will be handled by -consumers - - - - - -## [3.11.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.11.0...@microsoft/fast-components-react-base@3.11.1) (2019-03-22) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [3.11.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.10.0...@microsoft/fast-components-react-base@3.11.0) (2019-03-19) - - -### Bug Fixes - -* update jest to fix build break ([#1531](https://github.com/Microsoft/fast/issues/1531)) ([73ae6de](https://github.com/Microsoft/fast/commit/73ae6de)) -* update to disconnect the resize observer on component will unmount [#1529](https://github.com/Microsoft/fast/issues/1529) ([164dd3c](https://github.com/Microsoft/fast/commit/164dd3c)) - - -### Features - -* add auto suggest component ([#1551](https://github.com/Microsoft/fast/issues/1551)) ([660fc41](https://github.com/Microsoft/fast/commit/660fc41)) -* add enhancements for auto-suggest ([#1528](https://github.com/Microsoft/fast/issues/1528)) ([74a87f1](https://github.com/Microsoft/fast/commit/74a87f1)) - - - - - -# [3.10.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.9.1...@microsoft/fast-components-react-base@3.10.0) (2019-03-11) - - -### Bug Fixes - -* update focus events on keyboard close of menu ([#1505](https://github.com/Microsoft/fast/issues/1505)) ([9b153ea](https://github.com/Microsoft/fast/commit/9b153ea)) - - -### Features - -* add base select component ([#1422](https://github.com/Microsoft/fast/issues/1422)) ([b77a25e](https://github.com/Microsoft/fast/commit/b77a25e)) - - - - - -## [3.9.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.9.0...@microsoft/fast-components-react-base@3.9.1) (2019-03-01) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - -# [3.9.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.8.0...@microsoft/fast-components-react-base@3.9.0) (2019-02-28) - - -### Bug Fixes - -* add additional wrapper to dialog to prevent subpixel aliasing due to css transforms ([#1431](https://github.com/Microsoft/fast/issues/1431)) ([1fad8fe](https://github.com/Microsoft/fast/commit/1fad8fe)) -* remove defaultValue from number field schema and examples ([#1426](https://github.com/Microsoft/fast/issues/1426)) ([06c2d67](https://github.com/Microsoft/fast/commit/06c2d67)) - - -### Features - -* add class name for horizontal overflow items ([#1448](https://github.com/Microsoft/fast/issues/1448)) ([ffb6d87](https://github.com/Microsoft/fast/commit/ffb6d87)) -* add focus features to ContextMenu ([#1446](https://github.com/Microsoft/fast/issues/1446)) ([ab06478](https://github.com/Microsoft/fast/commit/ab06478)) - - - - - -# [3.8.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.7.0...@microsoft/fast-components-react-base@3.8.0) (2019-02-21) - - -### Bug Fixes - -* account for partial pixels when scrolling by rounding up ([#1409](https://github.com/Microsoft/fast/issues/1409)) ([ebb9e50](https://github.com/Microsoft/fast/commit/ebb9e50)) -* Changing activeID on Tabs component causes type error ([#1366](https://github.com/Microsoft/fast/issues/1366)) ([f23e927](https://github.com/Microsoft/fast/commit/f23e927)) -* update to the Horizontal Overflow component to fire the overflow callback when more children have been added ([#1413](https://github.com/Microsoft/fast/issues/1413)) ([69e24fb](https://github.com/Microsoft/fast/commit/69e24fb)) - - -### Features - -* add additional functionality to listbox base ([#1381](https://github.com/Microsoft/fast/issues/1381)) ([48d9c31](https://github.com/Microsoft/fast/commit/48d9c31)) -* create number field as base and MSFT component ([#1371](https://github.com/Microsoft/fast/issues/1371)) ([d440b5f](https://github.com/Microsoft/fast/commit/d440b5f)) - - - - - -# [3.7.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.6.3...@microsoft/fast-components-react-base@3.7.0) (2019-02-07) - - -### Bug Fixes - -* child component class name assignment in tabs ([#1345](https://github.com/Microsoft/fast/issues/1345)) ([769aa2b](https://github.com/Microsoft/fast/commit/769aa2b)) - - -### Features - -* add badge as an MSFT component ([#1278](https://github.com/Microsoft/fast/issues/1278)) ([79ce26c](https://github.com/Microsoft/fast/commit/79ce26c)) -* add listbox base component ([#1304](https://github.com/Microsoft/fast/issues/1304)) ([0ad4cbe](https://github.com/Microsoft/fast/commit/0ad4cbe)) - - - - - - -## [3.6.3](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.6.2...@microsoft/fast-components-react-base@3.6.3) (2019-01-26) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - - -## [3.6.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.6.1...@microsoft/fast-components-react-base@3.6.2) (2019-01-22) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - - -## [3.6.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.6.0...@microsoft/fast-components-react-base@3.6.1) (2019-01-22) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - - -## [3.4.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.4.0...@microsoft/fast-components-react-base@3.4.1) (2018-12-21) - - -### Bug Fixes - -* handle context menu item keydown and click events ([#1201](https://github.com/Microsoft/fast/issues/1201)) ([2bf858b](https://github.com/Microsoft/fast/commit/2bf858b)) -* style cleanup and consolidation ([#1198](https://github.com/Microsoft/fast/issues/1198)) ([4151f39](https://github.com/Microsoft/fast/commit/4151f39)) -* update components to handle undefined className ([#1197](https://github.com/Microsoft/fast/issues/1197)) ([2505d24](https://github.com/Microsoft/fast/commit/2505d24)) - - - - - - -## [3.1.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@3.1.0...@microsoft/fast-components-react-base@3.1.1) (2018-10-27) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - - -# [2.4.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@2.3.2...@microsoft/fast-components-react-base@2.4.0) (2018-09-24) - - -### Features - -* add slot-selection support to foundation ([#937](https://github.com/Microsoft/fast/issues/937)) ([958a637](https://github.com/Microsoft/fast/commit/958a637)) - - - - - - -## [2.3.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@2.3.1...@microsoft/fast-components-react-base@2.3.2) (2018-09-21) - -**Note:** Version bump only for package @microsoft/fast-components-react-base - - - - - - -## [2.3.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@2.3.0...@microsoft/fast-components-react-base@2.3.1) (2018-09-19) - - -### Bug Fixes - -* **fast-components-react-base:** tab component expects incorrect peer dependency version ([#925](https://github.com/Microsoft/fast/issues/925)) ([d35d3f3](https://github.com/Microsoft/fast/commit/d35d3f3)) -* **tab:** tab should render as a div instead of a button element ([#889](https://github.com/Microsoft/fast/issues/889)) ([9ab590c](https://github.com/Microsoft/fast/commit/9ab590c)) - - - - - - -# [2.3.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-components-react-base@2.2.0...@microsoft/fast-components-react-base@2.3.0) (2018-09-14) - - -### Bug Fixes - -* **progress:** enusure progress component, and correct typings are exported from MSFT package ([#882](https://github.com/Microsoft/fast/issues/882)) ([adfdbf7](https://github.com/Microsoft/fast/commit/adfdbf7)) - - -### Features - -* **text-field:** deprecates non string or number enum types which are not valid as text field inputs ([#875](https://github.com/Microsoft/fast/issues/875)) ([1a0316e](https://github.com/Microsoft/fast/commit/1a0316e)) - - - - - - -# 2.2.0 (2018-09-11) - - -### Features - -* add contrast based color system ([#810](https://github.com/Microsoft/fast/issues/810)) ([5ec457c](https://github.com/Microsoft/fast/commit/5ec457c)) -* **caption:** add caption component ([#829](https://github.com/Microsoft/fast/issues/829)) ([026cc4e](https://github.com/Microsoft/fast/commit/026cc4e)) -* **dialog:** add onDismiss callback to support "soft dismiss" functionality ([#869](https://github.com/Microsoft/fast/issues/869)) ([d295fc9](https://github.com/Microsoft/fast/commit/d295fc9)) -* **progress:** add progress component ([#835](https://github.com/Microsoft/fast/issues/835)) ([44d9bb1](https://github.com/Microsoft/fast/commit/44d9bb1)) - - - - -# 2.1.0 (2018-08-29) - - -### Bug Fixes - -* **fast-components-react-base:** allow horizontal overflow to accept passed class names ([#783](https://github.com/Microsoft/fast/issues/783)) ([40ae7a9](https://github.com/Microsoft/fast/commit/40ae7a9)) -* **hyperlink:** correctly handle href as a handled prop and update documentation ([#769](https://github.com/Microsoft/fast/issues/769)) ([bc771b5](https://github.com/Microsoft/fast/commit/bc771b5)) -* remove extraneous requirements for snapshot interface ([#788](https://github.com/Microsoft/fast/issues/788)) ([c043fc6](https://github.com/Microsoft/fast/commit/c043fc6)) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **fast-components-react-base:** add tabs component ([#761](https://github.com/Microsoft/fast/issues/761)) ([24a5bb3](https://github.com/Microsoft/fast/commit/24a5bb3)) -* **fast-development-site-react:** add component example transparency as opt-out ([#816](https://github.com/Microsoft/fast/issues/816)) ([705cb00](https://github.com/Microsoft/fast/commit/705cb00)) -* **paragraph:** adds paragraph as a new MSFT component ([#805](https://github.com/Microsoft/fast/issues/805)) ([8325d3f](https://github.com/Microsoft/fast/commit/8325d3f)) - - - - -# 2.0.0-corrected (2018-08-03) - - -### Bug Fixes - -* **button:** fixes an issue where href was not being passed as part of the created anchor element ([#411](https://github.com/Microsoft/fast/issues/411)) ([35928e1](https://github.com/Microsoft/fast/commit/35928e1)) -* ensure app build and tslint processes run prior in the build gate ([#132](https://github.com/Microsoft/fast/issues/132)) ([e74f953](https://github.com/Microsoft/fast/commit/e74f953)) -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) -* fix imports after updating types ([#644](https://github.com/Microsoft/fast/issues/644)) ([65ed738](https://github.com/Microsoft/fast/commit/65ed738)) -* fix tslint globbing issue and enforce whitespace in import/export statements ([#219](https://github.com/Microsoft/fast/issues/219)) ([4637a90](https://github.com/Microsoft/fast/commit/4637a90)) -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) -* **image:** fix image schema to match the current code implementation ([#671](https://github.com/Microsoft/fast/issues/671)) ([8618cd1](https://github.com/Microsoft/fast/commit/8618cd1)) -* **label:** fix spelling error in interface name for managed classes ([#755](https://github.com/Microsoft/fast/issues/755)) ([b57b4c1](https://github.com/Microsoft/fast/commit/b57b4c1)) -* **naming:** fix component names to align to repo standard ([#202](https://github.com/Microsoft/fast/issues/202)) ([298836e](https://github.com/Microsoft/fast/commit/298836e)) -* **toggle:** toggle "Selected" option does not work and is missing background color ([#663](https://github.com/Microsoft/fast/issues/663)) ([e05abca](https://github.com/Microsoft/fast/commit/e05abca)) -* **tslint:** fixes incorrect tslint rule regarding ordered imports ([#188](https://github.com/Microsoft/fast/issues/188)) ([ebe0b30](https://github.com/Microsoft/fast/commit/ebe0b30)) - - -### Features - -* add divider component ([#205](https://github.com/Microsoft/fast/issues/205)) ([ae25c38](https://github.com/Microsoft/fast/commit/ae25c38)) -* add form generator to the packages ([#311](https://github.com/Microsoft/fast/issues/311)) ([a339b3c](https://github.com/Microsoft/fast/commit/a339b3c)) -* add hypertext component ([#210](https://github.com/Microsoft/fast/issues/210)) ([9e363ff](https://github.com/Microsoft/fast/commit/9e363ff)) -* add sketch utility and design kit ([#495](https://github.com/Microsoft/fast/issues/495)) ([ce8feb3](https://github.com/Microsoft/fast/commit/ce8feb3)) -* add snapshot test suite ([#207](https://github.com/Microsoft/fast/issues/207)) ([7ceaafe](https://github.com/Microsoft/fast/commit/7ceaafe)) -* catagorizing relevant dependencies as peerDependencies ([#186](https://github.com/Microsoft/fast/issues/186)) ([7e15db6](https://github.com/Microsoft/fast/commit/7e15db6)) -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* **checkbox:** add new component with styles ([#252](https://github.com/Microsoft/fast/issues/252)) ([3ad3988](https://github.com/Microsoft/fast/commit/3ad3988)) -* remove JSS manager dependency from React base components ([#148](https://github.com/Microsoft/fast/issues/148)) ([48de34a](https://github.com/Microsoft/fast/commit/48de34a)) -* **button:** updates to current msft styles ([#314](https://github.com/Microsoft/fast/issues/314)) ([0029e06](https://github.com/Microsoft/fast/commit/0029e06)) -* **checkbox:** update styling and incorrect states ([#371](https://github.com/Microsoft/fast/issues/371)) ([45cbe3c](https://github.com/Microsoft/fast/commit/45cbe3c)) -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* **development-site:** add component for title and component for title with brand color applied ([#501](https://github.com/Microsoft/fast/issues/501)) ([d1d9d5c](https://github.com/Microsoft/fast/commit/d1d9d5c)) -* **dialog:** add dialog as a new component ([#752](https://github.com/Microsoft/fast/issues/752)) ([2864021](https://github.com/Microsoft/fast/commit/2864021)) -* **fast-components-react-base:** add horizontal overflow ([#739](https://github.com/Microsoft/fast/issues/739)) ([c6b0ebf](https://github.com/Microsoft/fast/commit/c6b0ebf)) -* **fast-components-react-base:** add unit tests to all components and update code coverage expectations ([#699](https://github.com/Microsoft/fast/issues/699)) ([c476889](https://github.com/Microsoft/fast/commit/c476889)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) -* **Image:** add new component and msft styles ([#237](https://github.com/Microsoft/fast/issues/237)) ([ea057ed](https://github.com/Microsoft/fast/commit/ea057ed)) -* **label:** add new component and msft styles ([#265](https://github.com/Microsoft/fast/issues/265)) ([0328028](https://github.com/Microsoft/fast/commit/0328028)) -* **structure:** updates the structure for the development site ([#217](https://github.com/Microsoft/fast/issues/217)) ([e153b0b](https://github.com/Microsoft/fast/commit/e153b0b)) -* **toggle:** add new component and msft styles ([#212](https://github.com/Microsoft/fast/issues/212)) ([b9dd3e0](https://github.com/Microsoft/fast/commit/b9dd3e0)) -* **typography:** add typography as a new base component and style ([#247](https://github.com/Microsoft/fast/issues/247)) ([df3804e](https://github.com/Microsoft/fast/commit/df3804e)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) -* update to React 16.3 ([#251](https://github.com/Microsoft/fast/issues/251)) ([1fe77ef](https://github.com/Microsoft/fast/commit/1fe77ef)) - - -### BREAKING CHANGES - -* **label:** contains a change to interface names - - - - - - -# [2.1.0](https://github.com/Microsoft/fast/compare/v2.0.0-corrected...v2.1.0) (2018-08-29) - - -### Bug Fixes - -* **fast-components-react-base:** allow horizontal overflow to accept passed class names ([#783](https://github.com/Microsoft/fast/issues/783)) ([40ae7a9](https://github.com/Microsoft/fast/commit/40ae7a9)) -* **hyperlink:** correctly handle href as a handled prop and update documentation ([#769](https://github.com/Microsoft/fast/issues/769)) ([bc771b5](https://github.com/Microsoft/fast/commit/bc771b5)) -* remove extraneous requirements for snapshot interface ([#788](https://github.com/Microsoft/fast/issues/788)) ([c043fc6](https://github.com/Microsoft/fast/commit/c043fc6)) - - -### Features - -* update Lerna to ^3.0.0 ([#795](https://github.com/Microsoft/fast/issues/795)) ([9ce9a56](https://github.com/Microsoft/fast/commit/9ce9a56)) -* upgrade to TypeScript 3.0.0 ([#793](https://github.com/Microsoft/fast/issues/793)) ([e203e86](https://github.com/Microsoft/fast/commit/e203e86)) -* **fast-components-react-base:** add callback to horizontal overflow to return and object that informs scroll start and end ([#797](https://github.com/Microsoft/fast/issues/797)) ([37975f3](https://github.com/Microsoft/fast/commit/37975f3)) -* **fast-components-react-base:** add tabs component ([#761](https://github.com/Microsoft/fast/issues/761)) ([24a5bb3](https://github.com/Microsoft/fast/commit/24a5bb3)) -* **fast-development-site-react:** add component example transparency as opt-out ([#816](https://github.com/Microsoft/fast/issues/816)) ([705cb00](https://github.com/Microsoft/fast/commit/705cb00)) -* **paragraph:** adds paragraph as a new MSFT component ([#805](https://github.com/Microsoft/fast/issues/805)) ([8325d3f](https://github.com/Microsoft/fast/commit/8325d3f)) - - - - - - -# [2.0.0](https://github.com/Microsoft/fast/compare/v1.6.0...v2.0.0) (2018-08-02) - - -### Bug Fixes - -* fix imports after updating types ([#644](https://github.com/Microsoft/fast/issues/644)) ([65ed738](https://github.com/Microsoft/fast/commit/65ed738)) -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) -* **image:** fix image schema to match the current code implementation ([#671](https://github.com/Microsoft/fast/issues/671)) ([8618cd1](https://github.com/Microsoft/fast/commit/8618cd1)) -* **label:** fix spelling error in interface name for managed classes ([#755](https://github.com/Microsoft/fast/issues/755)) ([b57b4c1](https://github.com/Microsoft/fast/commit/b57b4c1)) -* **toggle:** toggle "Selected" option does not work and is missing background color ([#663](https://github.com/Microsoft/fast/issues/663)) ([e05abca](https://github.com/Microsoft/fast/commit/e05abca)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* add sketch utility and design kit ([#495](https://github.com/Microsoft/fast/issues/495)) ([ce8feb3](https://github.com/Microsoft/fast/commit/ce8feb3)) -* **development-site:** add component for title and component for title with brand color applied ([#501](https://github.com/Microsoft/fast/issues/501)) ([d1d9d5c](https://github.com/Microsoft/fast/commit/d1d9d5c)) -* **dialog:** add dialog as a new component ([#752](https://github.com/Microsoft/fast/issues/752)) ([2864021](https://github.com/Microsoft/fast/commit/2864021)) -* **fast-components-react-base:** add horizontal overflow ([#739](https://github.com/Microsoft/fast/issues/739)) ([c6b0ebf](https://github.com/Microsoft/fast/commit/c6b0ebf)) -* **fast-components-react-base:** add unit tests to all components and update code coverage expectations ([#699](https://github.com/Microsoft/fast/issues/699)) ([c476889](https://github.com/Microsoft/fast/commit/c476889)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - -### BREAKING CHANGES - -* **label:** contains a change to interface names - - - - - -# [1.9.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.9.0) (2018-07-14) - - -### Bug Fixes - -* fix imports after updating types ([#644](https://github.com/Microsoft/fast/issues/644)) ([65ed738](https://github.com/Microsoft/fast/commit/65ed738)) -* **fast-components-react-msft:** fixes error running jest with components that require chroma ([#687](https://github.com/Microsoft/fast/issues/687)) ([140457c](https://github.com/Microsoft/fast/commit/140457c)) -* **image:** fix image schema to match the current code implementation ([#671](https://github.com/Microsoft/fast/issues/671)) ([8618cd1](https://github.com/Microsoft/fast/commit/8618cd1)) -* **toggle:** toggle "Selected" option does not work and is missing background color ([#663](https://github.com/Microsoft/fast/issues/663)) ([e05abca](https://github.com/Microsoft/fast/commit/e05abca)) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) -* add sketch utility and design kit ([#495](https://github.com/Microsoft/fast/issues/495)) ([ce8feb3](https://github.com/Microsoft/fast/commit/ce8feb3)) -* **development-site:** add component for title and component for title with brand color applied ([#501](https://github.com/Microsoft/fast/issues/501)) ([d1d9d5c](https://github.com/Microsoft/fast/commit/d1d9d5c)) -* **fast-css-editor-react:** add default editor component and position component ([#636](https://github.com/Microsoft/fast/issues/636)) ([72037a8](https://github.com/Microsoft/fast/commit/72037a8)) - - - - - -# [1.8.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.8.0) (2018-06-12) - - -### Features - -* add sketch utility and design kit ([#495](https://github.com/Microsoft/fast/issues/495)) ([ce8feb3](https://github.com/Microsoft/fast/commit/ce8feb3)) -* **development-site:** add component for title and component for title with brand color applied ([#501](https://github.com/Microsoft/fast/issues/501)) ([d1d9d5c](https://github.com/Microsoft/fast/commit/d1d9d5c)) - - - - - -# [1.7.0](https://github.com/Microsoft/fast/compare/v1.6.0...v1.7.0) (2018-06-01) - - -### Features - -* **detail view:** add detail view ([#470](https://github.com/Microsoft/fast/issues/470)) ([665b871](https://github.com/Microsoft/fast/commit/665b871)) - - - - - -# [1.6.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.6.0) (2018-05-16) - - - - - -# [1.5.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.5.0) (2018-05-16) - - -### Bug Fixes - -* **button:** fixes an issue where href was not being passed as part of the created anchor element ([#411](https://github.com/Microsoft/fast/issues/411)) ([35928e1](https://github.com/Microsoft/fast/commit/35928e1)) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# [1.4.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.4.0) (2018-05-14) - - -### Bug Fixes - -* **button:** fixes an issue where href was not being passed as part of the created anchor element ([#411](https://github.com/Microsoft/fast/issues/411)) ([35928e1](https://github.com/Microsoft/fast/commit/35928e1)) - - -### Features - -* **form generator:** updates styles found in configuration pane ([#420](https://github.com/Microsoft/fast/issues/420)) ([919121b](https://github.com/Microsoft/fast/commit/919121b)) - - - - - -# [1.3.0](https://github.com/Microsoft/fast/compare/v1.2.0...v1.3.0) (2018-05-11) - - -### Bug Fixes - -* **button:** fixes an issue where href was not being passed as part of the created anchor element ([#411](https://github.com/Microsoft/fast/issues/411)) ([35928e1](https://github.com/Microsoft/fast/commit/35928e1)) - - - - - -# 1.2.0 (2018-05-10) - -### Features - -* **checkbox:** update styling and incorrect states ([#371](https://github.com/Microsoft/fast/issues/371)) ([45cbe3c](https://github.com/Microsoft/fast/commit/45cbe3c)) - - - -# 1.1.0 (2018-05-09) - - -### Bug Fixes - -* ensure app build and tslint processes run prior in the build gate ([#132](https://github.com/Microsoft/fast/issues/132)) ([e74f953](https://github.com/Microsoft/fast/commit/e74f953)) -* **naming:** fix component names to align to repo standard ([#202](https://github.com/Microsoft/fast/issues/202)) ([298836e](https://github.com/Microsoft/fast/commit/298836e)) -* **tslint:** fixes incorrect tslint rule regarding ordered imports ([#188](https://github.com/Microsoft/fast/issues/188)) ([ebe0b30](https://github.com/Microsoft/fast/commit/ebe0b30)) -* fix tslint globbing issue and enforce whitespace in import/export statements ([#219](https://github.com/Microsoft/fast/issues/219)) ([4637a90](https://github.com/Microsoft/fast/commit/4637a90)) -* travis-CI build-break ([#336](https://github.com/Microsoft/fast/issues/336)) ([bffbf5e](https://github.com/Microsoft/fast/commit/bffbf5e)) - - -### Features - -* add divider component ([#205](https://github.com/Microsoft/fast/issues/205)) ([ae25c38](https://github.com/Microsoft/fast/commit/ae25c38)) -* add form generator to the packages ([#311](https://github.com/Microsoft/fast/issues/311)) ([a339b3c](https://github.com/Microsoft/fast/commit/a339b3c)) -* add hypertext component ([#210](https://github.com/Microsoft/fast/issues/210)) ([9e363ff](https://github.com/Microsoft/fast/commit/9e363ff)) -* add snapshot test suite ([#207](https://github.com/Microsoft/fast/issues/207)) ([7ceaafe](https://github.com/Microsoft/fast/commit/7ceaafe)) -* catagorizing relevant dependencies as peerDependencies ([#186](https://github.com/Microsoft/fast/issues/186)) ([7e15db6](https://github.com/Microsoft/fast/commit/7e15db6)) -* Forked Class name contracts so we can have one for Base and one for MSFT ([#262](https://github.com/Microsoft/fast/issues/262)) ([a4c54c0](https://github.com/Microsoft/fast/commit/a4c54c0)) -* **typography:** add typography as a new base component and style ([#247](https://github.com/Microsoft/fast/issues/247)) ([df3804e](https://github.com/Microsoft/fast/commit/df3804e)) -* remove JSS manager dependency from React base components ([#148](https://github.com/Microsoft/fast/issues/148)) ([48de34a](https://github.com/Microsoft/fast/commit/48de34a)) -* **button:** updates to current msft styles ([#314](https://github.com/Microsoft/fast/issues/314)) ([0029e06](https://github.com/Microsoft/fast/commit/0029e06)) -* update code coverage on travis ([#330](https://github.com/Microsoft/fast/issues/330)) ([63ab4f4](https://github.com/Microsoft/fast/commit/63ab4f4)) -* **checkbox:** add new component with styles ([#252](https://github.com/Microsoft/fast/issues/252)) ([3ad3988](https://github.com/Microsoft/fast/commit/3ad3988)) -* **Image:** add new component and msft styles ([#237](https://github.com/Microsoft/fast/issues/237)) ([ea057ed](https://github.com/Microsoft/fast/commit/ea057ed)) -* **label:** add new component and msft styles ([#265](https://github.com/Microsoft/fast/issues/265)) ([0328028](https://github.com/Microsoft/fast/commit/0328028)) -* **structure:** updates the structure for the development site ([#217](https://github.com/Microsoft/fast/issues/217)) ([e153b0b](https://github.com/Microsoft/fast/commit/e153b0b)) -* **toggle:** add new component and msft styles ([#212](https://github.com/Microsoft/fast/issues/212)) ([b9dd3e0](https://github.com/Microsoft/fast/commit/b9dd3e0)) -* update to React 16.3 ([#251](https://github.com/Microsoft/fast/issues/251)) ([1fe77ef](https://github.com/Microsoft/fast/commit/1fe77ef)) diff --git a/packages/react/fast-components-react-base/README.md b/packages/react/fast-components-react-base/README.md deleted file mode 100644 index 78eadd28b56..00000000000 --- a/packages/react/fast-components-react-base/README.md +++ /dev/null @@ -1,61 +0,0 @@ -# FAST Components React base - -Base components are the structural, semantic, and interactive core of a piece of UI without any explicit visual representation. For the most part, base components are only as opinionated as they have to be to support the semantic, structural, and accessibility related goals. In rare cases, there are structural changes made to support external styling (such as native elements like an input of type checkbox). Base components are useful when building out a new design system, or when you have two components that require the same base functionality and structure, but completely different visual represenations (button vs flipper). - -## Installation - -`npm i --save @microsoft/fast-components-react-base` - -## Usage - -### Basic implementation - -An example of using one of the components from the `@microsoft/fast-components-react-base` package: - -```tsx -import React from "react"; -import ReactDOM from "react-dom"; -import { ClassNames, IButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { Button } from "@microsoft/fast-components-react-base"; - -const root = document.createElement("div"); -root.setAttribute("id", "root"); -document.body.appendChild(root); - -const classNames: ClassNames = { - button: "my-button-classname" -}; - -function render(): void { - ReactDOM.render( - , - root - ); -} - -render(); -``` - -### Styled implementation - -An example of using the `manageJss` from `@microsoft/fast-jss-manager-react` higher order component to export a component with a JSS style. See the `@microsoft/fast-components-class-name-contracts-base` for the list of class names that can be applied to the base components. - -```tsx -import React from "react"; -import { Button } from "@microsoft/fast-components-react-base"; -import manageJss from "@microsoft/fast-jss-manager-react"; - -const buttonStyles = { - button: { - background: "blue" - } -}; - -export default manageJss(buttonStyles)(Button); -``` - -## Component documentation - -Each component comes with a README.md for implementation and other usage details, a JSON schema for the properties that can be used and additional TypeScript definition files. diff --git a/packages/react/fast-components-react-base/babel.config.js b/packages/react/fast-components-react-base/babel.config.js deleted file mode 100644 index 190c11f3eda..00000000000 --- a/packages/react/fast-components-react-base/babel.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - presets: [ - [ - "@babel/preset-env", { - "targets": { - "node": "current" - } - } - ], - "@babel/react" - ] -} \ No newline at end of file diff --git a/packages/react/fast-components-react-base/package.json b/packages/react/fast-components-react-base/package.json deleted file mode 100644 index 7ca350148de..00000000000 --- a/packages/react/fast-components-react-base/package.json +++ /dev/null @@ -1,132 +0,0 @@ -{ - "name": "@microsoft/fast-components-react-base", - "description": "FAST base components implemented in React.", - "sideEffects": false, - "version": "4.27.0", - "author": { - "name": "Microsoft", - "url": "https://discord.gg/FcSNfg4" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/microsoft/fast-react.git" - }, - "bugs": { - "url": "https://github.com/Microsoft/fast/issues/new/choose" - }, - "main": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "build": "tsc -p ./tsconfig.build.json && yarn copy:all", - "clean:dist": "node ../../../build/clean.js dist", - "convert:readme": "node ../../../build/convert-readme.js .tmp", - "copy:all": "yarn convert:json-schema && yarn copy:readme", - "convert:json-schema": "node ../../../build/convert-schemas.js", - "copy:readme": "node ../../../build/copy-readme.js", - "coverage": "jest --coverage", - "prepare": "yarn clean:dist && yarn build", - "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,tsx}\"", - "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,tsx}\" --list-different", - "start": "start-storybook", - "test": "yarn convert:readme && yarn eslint && yarn unit-tests", - "eslint": "eslint . --ext .ts,.tsx", - "eslint:fix": "eslint . --ext .ts,.tsx --fix", - "unit-tests": "jest --runInBand --env=jsdom --setupTestFrameworkScriptFile=raf/polyfill", - "unit-tests:watch": "jest --watch", - "watch": "tsc -p ./tsconfig.json -w --preserveWatchOutput" - }, - "jest": { - "collectCoverage": true, - "coverageReporters": [ - "json", - "text", - [ - "lcov", - { - "projectRoot": "../../../" - } - ] - ], - "coverageThreshold": { - "global": { - "statements": 80, - "branches": 75, - "functions": 80, - "lines": 80 - } - }, - "coveragePathIgnorePatterns": [ - "/.tmp/*" - ], - "testURL": "http://localhost", - "transform": { - "^.+\\.tsx?$": "ts-jest", - "^.+\\.jsx?$": "babel-jest" - }, - "transformIgnorePatterns": [ - "!/node_modules/lodash-es" - ], - "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", - "moduleFileExtensions": [ - "ts", - "tsx", - "js", - "jsx", - "json" - ] - }, - "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/preset-env": "^7.1.0", - "@babel/preset-react": "^7.0.0", - "@microsoft/eslint-config-fast-dna": "^1.2.0", - "@microsoft/fast-storybook-presets": "^1.3.0", - "@storybook/addon-actions": "^5.1.9", - "@storybook/preset-typescript": "^1.1.0", - "@storybook/react": "^5.1.9", - "@types/enzyme": "^3.1.15", - "@types/jest": "^25.2.1", - "@types/lodash-es": "^4.17.0", - "@types/node": "^9.4.6", - "@types/react": "^16.8.0", - "@types/tabbable": "^3.1.0", - "babel-core": "^7.0.0-bridge.0", - "babel-loader": "^8.0.6", - "enzyme": "^3.3.0", - "enzyme-adapter-react-16": "^1.1.1", - "eslint-config-prettier": "^6.10.1", - "eslint-loader": "^4.0.0", - "glob": "^7.1.2", - "jest": "^25.4.0", - "jsdom-global": "^3.0.2", - "lodash-es": "^4.0.0", - "prettier": "2.0.2", - "raf-polyfill": "^1.0.0", - "react": "^16.8.0", - "react-docgen-typescript-loader": "^3.1.0", - "react-dom": "^16.8.0", - "react-test-renderer": "^16.3.0", - "regenerator-runtime": "^0.11.1", - "rimraf": "^2.6.2", - "ts-jest": "^25.4.0", - "ts-loader": "^4.0.1", - "typescript": "^3.9.0", - "yargs": "^11.0.0" - }, - "peerDependencies": { - "lodash-es": "^4.0.0", - "react": "^16.8.0", - "react-dom": "^16.8.0" - }, - "dependencies": { - "@microsoft/fast-components-class-name-contracts-base": "^4.8.0", - "@microsoft/fast-components-foundation-react": "^3.2.0", - "@microsoft/fast-react-utilities": "^1.2.0", - "@microsoft/fast-tooling": "^0.7.0", - "@microsoft/fast-web-utilities": "^4.6.0", - "exenv-es6": "^1.0.0", - "raf-throttle": "^2.0.3", - "tabbable": "^4.0.0" - } -} diff --git a/packages/react/fast-components-react-base/src/auto-suggest/README.md b/packages/react/fast-components-react-base/src/auto-suggest/README.md deleted file mode 100644 index fa09d8c1f3c..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/README.md +++ /dev/null @@ -1,16 +0,0 @@ -## Auto suggest -The *auto suggest* component presents suggestions in a list as the user types in a search box. - -### Usage -The *auto suggest* component can be thought of as having two parts: -- the "input region" portion of the component, basically a text input box. -- the "menu" portion which consists of a *listbox* which displays the list of suggested options. - -The expected usage pattern of the component is for authors to watch the "onValueChange" event to detect text changes in the component and to use that to determine how to update the children (typically based on *listbox-item*) of the component. The "onInvoked" event indicates that the user made a choice. The "item" parameter of the "onInvoked" event will be the props of the invoked child if the user invoked a list item directly (vs. hitting return on the input box itself. - -The input region of the component can be customized using the component's "inputRegion" render prop. - -The "isMenuOpen" prop enables authors to take control of when the menu is open. Setting "isMenuOpen" to false keeps the menu closed, and setting it to true keeps it open (unless there are no children, in which case it is always closed). - -### Accessibility -*Auto suggest* implements the recommended keyboard navigation scheme described [here](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) for interacting with the listbox. diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest-context.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest-context.tsx deleted file mode 100644 index e0abd0f2975..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest-context.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -export interface AutoSuggestContextType { - /** - * The current value of the component - * (ie. the string currently entered in the input box) - */ - currentValue: string; -} - -export const AutoSuggestContext: React.Context = React.createContext( - { - currentValue: "", - } -); diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.props.ts b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.props.ts deleted file mode 100644 index 8e11e9db28f..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.props.ts +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { - AutoSuggestClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; -import { ListboxItemProps } from "../listbox-item"; -import { AutoSuggestState } from "./auto-suggest"; - -export type AutoSuggestManagedClasses = ManagedClasses; -export type AutoSuggestUnhandledProps = React.HTMLAttributes; - -export interface AutoSuggestHandledProps extends AutoSuggestManagedClasses { - /** - * Custom function to render the input box of the control - */ - inputRegion?: ( - props: AutoSuggestProps, - state: AutoSuggestState, - changeCallback: (event: React.ChangeEvent) => void, - buttonClickCallback: (event: React.MouseEvent) => void, - keyDownCallback: (event: React.KeyboardEvent) => void, - focusCallback?: (event: React.FocusEvent) => void - ) => React.ReactNode; - - /** - * Specifies that the drop-down list is open - */ - isMenuOpen?: boolean; - - /** - * Specifies that the control is disabled - */ - disabled?: boolean; - - /** - * String displayed when there text entered - */ - placeholder?: string; - - /** - * Pre-populates input field with provided string on mount - */ - initialValue?: string; - - /** - * The value of the input field (controlled mode) - */ - value?: string; - - /** - * The onValueChanged event handler - * called when text changes in the input region - */ - onValueChange?: (value: string, isFromSuggestedOption?: boolean) => void; - - /** - * The onInvoked event handler - * called when the input text is invoked - * (ie. user hits enter while focused on the input area or an option in the list) - */ - onInvoked?: (value: string, item: ListboxItemProps) => void; - - /** - * The aria-label attribute of the component - */ - label?: string; - - /** - * The unique id that will be assigned to the listbox created by this component - */ - listboxId: string; - - /** - * Specifies whether the suggestions should filter - */ - filterSuggestions?: boolean; -} - -export type AutoSuggestProps = AutoSuggestHandledProps & AutoSuggestUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.2.ts b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.2.ts deleted file mode 100644 index 3125892ab31..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.2.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "AutoSuggest", - description: "An auto suggest component's schema definition.", - type: "object", - id: "auto-suggest", - properties: { - placeholder: { - title: "Placeholder", - type: "string", - }, - disabled: { - title: "Disabled", - type: "boolean", - }, - isMenuOpen: { - title: "Is menu open", - type: "boolean", - }, - initialValue: { - title: "Initial value", - type: "string", - }, - value: { - title: "Value", - type: "string", - }, - label: { - title: "Label", - type: "string", - }, - filterSuggestions: { - title: "Filter suggestions", - type: "boolean", - default: "false", - }, - children: { - ...linkedDataSchema, - title: "Building blocks", - }, - }, - required: ["listboxId"], -}; diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.ts b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.ts deleted file mode 100644 index 9fe915829f4..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.schema.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "AutoSuggest", - description: "An auto suggest component's schema definition.", - type: "object", - id: "auto-suggest", - properties: { - placeholder: { - title: "Placeholder", - type: "string", - }, - disabled: { - title: "Disabled", - type: "boolean", - }, - isMenuOpen: { - title: "Is menu open", - type: "boolean", - }, - initialValue: { - title: "Initial value", - type: "string", - }, - value: { - title: "Value", - type: "string", - }, - label: { - title: "Label", - type: "string", - }, - filterSuggestions: { - title: "Filter suggestions", - type: "boolean", - default: "false", - }, - }, - reactProperties: { - children: { - title: "Building blocks", - type: "children", - defaults: ["text"], - }, - }, - required: ["listboxId"], -}; diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx deleted file mode 100644 index 85868aa9c3e..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx +++ /dev/null @@ -1,605 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, ReactWrapper, shallow } from "enzyme"; -import { - keyCodeArrowDown, - keyCodeArrowUp, - keyCodeColon, - keyCodeEnter, - keyCodeEscape, - keyCodeTab, -} from "@microsoft/fast-web-utilities"; -import ListboxItem from "../listbox-item"; -import { DisplayNamePrefix } from "../utilities"; -import { Listbox } from "../index"; -import AutoSuggest, { AutoSuggestUnhandledProps } from "./auto-suggest"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -const itemA: JSX.Element = ; -const itemB: JSX.Element = ; -const itemC: JSX.Element = ; - -describe("auto suggest", (): void => { - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(AutoSuggest as any).name}`).toBe( - AutoSuggest.displayName - ); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should implement unhandledProps", (): void => { - const unhandledProps: AutoSuggestUnhandledProps = { - "aria-label": "label", - }; - - const rendered: any = shallow( - - ); - - expect(rendered.first().prop("aria-label")).toEqual("label"); - }); - - test("initial default state is correct", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - expect(rendered.state("value")).toBe(""); - expect(rendered.state("focusedItem")).toBe(null); - expect(rendered.state("isMenuOpen")).toBe(false); - }); - - test("value prop is applied", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - expect(rendered.state("value")).toBe("test value"); - }); - - test("input region accessibility attributes are set correctly (autocomplete='both', )", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - const input: any = rendered.find("input"); - expect(input.prop("aria-autocomplete")).toEqual("both"); - expect(input.prop("role")).toEqual("combobox"); - }); - - test("input region gets label applied from props", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - const input: any = rendered.find("input"); - expect(input.prop("aria-label")).toEqual("test-label"); - }); - - test("input region is disabled when component is disabled", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - const input: any = rendered.find("input"); - expect(input.prop("disabled")).toBe(true); - }); - - test("input region 'aria-owns' and 'aria-controls' attributes are null by default and point to listbox id when listbox is open", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - let input: any = rendered.find("input"); - expect(input.prop("aria-owns")).toBe(null); - expect(input.prop("aria-controls")).toBe(null); - expect(input.prop("aria-activedescendant")).toBe(null); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - - input = rendered.find("input"); - expect(input.prop("aria-owns")).toEqual("listboxId"); - expect(input.prop("aria-controls")).toEqual("listboxId"); - expect(input.prop("aria-activedescendant")).toEqual("a"); - - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - input = rendered.find("input"); - expect(input.prop("aria-owns")).toEqual("listboxId"); - expect(input.prop("aria-controls")).toEqual("listboxId"); - expect(input.prop("aria-activedescendant")).toEqual("b"); - - document.body.removeChild(container); - }); - - test("input region 'aria-owns' and 'aria-controls' attributes are null by default and point to listbox id when listbox is open", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - let input: any = rendered.find("input"); - expect(input.prop("aria-owns")).toBe(null); - expect(input.prop("aria-controls")).toBe(null); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - - input = rendered.find("input"); - expect(input.prop("aria-owns")).toEqual("listboxId"); - expect(input.prop("aria-controls")).toEqual("listboxId"); - - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - input = rendered.find("input"); - expect(input.prop("aria-owns")).toEqual("listboxId"); - expect(input.prop("aria-controls")).toEqual("listboxId"); - - document.body.removeChild(container); - }); - - test("input region 'aria-activedescendant' is initially null and tracks focused item in listbox", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - let input: any = rendered.find("input"); - expect(input.prop("aria-activedescendant")).toBe(null); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - - input = rendered.find("input"); - expect(input.prop("aria-activedescendant")).toEqual("a"); - - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - input = rendered.find("input"); - expect(input.prop("aria-activedescendant")).toEqual("b"); - - document.body.removeChild(container); - }); - - test("menu should open and have correct id on input region click", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - let input: any = rendered.find("input"); - expect(input.prop("aria-expanded")).toBe(false); - - expect(rendered.state("isMenuOpen")).toBe(false); - input.simulate("click"); - expect(rendered.state("isMenuOpen")).toBe(true); - - input = rendered.find("input"); - expect(input.prop("aria-expanded")).toBe(true); - - const listbox: any = rendered.find('[role="listbox"]'); - expect(listbox.prop("id")).toBe("listboxId"); - }); - - test("menu should close when the component loses focus", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - // const autoSuggest: any = rendered.find(AutoSuggest.displayName); - expect(rendered.state("isMenuOpen")).toBe(false); - let input: any = rendered.find("input"); - expect(input.prop("aria-expanded")).toBe(false); - - input.simulate("click"); - expect(rendered.state("isMenuOpen")).toBe(true); - - input = rendered.find("input"); - expect(input.prop("aria-expanded")).toBe(true); - - input.simulate("blur"); - expect(rendered.state("isMenuOpen")).toBe(false); - - input = rendered.find("input"); - expect(input.prop("aria-expanded")).toBe(false); - }); - - test("menu should open and close as the isMenuOpen prop changes", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - ); - - expect(rendered.state("isMenuOpen")).toBe(false); - - rendered.setProps({ - isMenuOpen: true, - }); - expect(rendered.state("isMenuOpen")).toBe(true); - - rendered.setProps({ - isMenuOpen: false, - }); - expect(rendered.state("isMenuOpen")).toBe(false); - }); - - // Test is incompatible with Jest 25.x, refer to issue #2882 - xtest("arrow keys properly traverse the listbox and input region and cause focus and value to changes appropriately", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - const input: any = rendered.find("input"); - expect(document.activeElement.id).toBe(""); - expect(rendered.state("value")).toEqual("search"); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe("a"); - expect(rendered.state("value")).toEqual("a"); - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe("b"); - expect(rendered.state("value")).toEqual("b"); - rendered - .find({ id: "b" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe("c"); - expect(rendered.state("value")).toEqual("c"); - rendered - .find({ id: "c" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe(""); - expect(rendered.state("value")).toEqual("search"); - input.simulate("keydown", { keyCode: keyCodeArrowUp }); - expect(document.activeElement.id).toBe("c"); - expect(rendered.state("value")).toEqual("c"); - rendered - .find({ id: "c" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowUp }); - expect(document.activeElement.id).toBe("b"); - expect(rendered.state("value")).toEqual("b"); - rendered - .find({ id: "b" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowUp }); - expect(document.activeElement.id).toBe("a"); - expect(rendered.state("value")).toEqual("a"); - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeArrowUp }); - expect(document.activeElement.id).toBe(""); - expect(rendered.state("value")).toEqual("search"); - - document.body.removeChild(container); - }); - - test("onValueChanged event handler called when text changes in input region", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const onValueChange: any = jest.fn(); - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - expect(onValueChange).toHaveBeenCalledTimes(0); - const input: any = rendered.find("input"); - input.simulate("keydown", { keyCode: keyCodeColon }); - expect(onValueChange).toHaveBeenCalledTimes(1); - expect(onValueChange.mock.calls[0][1]).toEqual(false); - document.body.removeChild(container); - }); - - test("onValueChanged event handler called with 'isFromSuggestedOption' flag when focus changes in menu", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const onValueChange: any = jest.fn(); - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - expect(onValueChange).toHaveBeenCalledTimes(0); - expect(rendered.state("value")).toBe(""); - const input: any = rendered.find("input"); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(rendered.state("value")).toBe("a"); - expect(onValueChange).toHaveBeenCalledTimes(1); - expect(onValueChange.mock.calls[0][1]).toEqual(true); - - document.body.removeChild(container); - }); - - test("onInvoked event handler called on keydown of list item", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const onInvoked: any = jest.fn(); - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - expect(onInvoked).toHaveBeenCalledTimes(0); - const input: any = rendered.find("input"); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeEnter }); - expect(onInvoked).toHaveBeenCalledTimes(1); - - document.body.removeChild(container); - }); - - test("onInvoked event handler called on keydown of input element", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const onInvoked: any = jest.fn(); - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - expect(onInvoked).toHaveBeenCalledTimes(0); - const input: any = rendered.find("input"); - input.simulate("keydown", { keyCode: keyCodeEnter }); - expect(onInvoked).toHaveBeenCalledTimes(1); - - document.body.removeChild(container); - }); - - test("intialValue prop applied correctly", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - expect(rendered.state("value")).toBe("test"); - - document.body.removeChild(container); - }); - - test("Custom input region render function is called", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const inputRenderFn: any = jest.fn(); - inputRenderFn.mockReturnValue("Test"); - /* eslint-disable-next-line */ - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - expect(inputRenderFn).toHaveBeenCalledTimes(1); - - document.body.removeChild(container); - }); - - test("Default tab behaviour is not modified in controlled mode", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.append(container); - - const onInvoked: jest.Mock = jest.fn(); - const onValueChange: jest.Mock = jest.fn(); - const rendered: ReactWrapper = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - - const input: ReactWrapper = rendered.find("input"); - const preventDefault: jest.Mock = jest.fn(); - input.simulate("keydown", { keyCode: keyCodeTab, preventDefault }); - - expect(onInvoked).not.toHaveBeenCalled(); // Invoke should not be called - expect(onValueChange).not.toHaveBeenCalled(); // Value change should not be called - expect(preventDefault).not.toHaveBeenCalled(); // Default behavior should not be prevented - - document.body.removeChild(container); - }); - - test("Should render none listbox item when filterSuggestions id set to true", (): void => { - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - - - ); - - expect(rendered.find(Listbox.displayName).get(0).props.children).toHaveLength(2); - }); - - test("closing menu focuses on input element", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - const input: any = rendered.find("input"); - expect(document.activeElement.id).toBe(""); - expect(rendered.state("value")).toEqual("search"); - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe("a"); - rendered - .find({ id: "a" }) - .find(ListboxItem.displayName) - .simulate("keydown", { keyCode: keyCodeEscape }); - expect(document.activeElement.getAttribute("role")).toBe("combobox"); - document.body.removeChild(container); - }); - - test("down arrow key on input element with menu open focuses on menu item", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - const input: any = rendered.find("input"); - expect(rendered.state("isMenuOpen")).toBe(false); - input.simulate("click"); - input.simulate("keydown", { key: "a" }); - expect(rendered.state("isMenuOpen")).toBe(true); - expect(document.activeElement.getAttribute("role")).toBe("combobox"); - - input.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(document.activeElement.id).toBe("a"); - - document.body.removeChild(container); - }); - - test("up arrow key on input element with menu open focuses on menu item", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - {itemA} - {itemB} - {itemC} - , - { attachTo: container } - ); - const input: any = rendered.find("input"); - expect(rendered.state("isMenuOpen")).toBe(false); - input.simulate("click"); - input.simulate("keydown", { key: "a" }); - expect(rendered.state("isMenuOpen")).toBe(true); - expect(document.activeElement.getAttribute("role")).toBe("combobox"); - - input.simulate("keydown", { keyCode: keyCodeArrowUp }); - expect(document.activeElement.id).toBe("c"); - - document.body.removeChild(container); - }); -}); diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx deleted file mode 100644 index 48ad2cc86ab..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { action } from "@storybook/addon-actions"; -import { storiesOf } from "@storybook/react"; -import { uniqueId } from "lodash-es"; -import React, { useState } from "react"; -import ListboxItem from "../listbox-item"; -import AutoSuggest, { AutoSuggestProps } from "./"; - -/** - * Simple state manager to track and update value properties - */ -function AutoSuggestStateHandler(props: { - children: ( - selected: string, - onChange: AutoSuggestProps["onValueChange"] - ) => JSX.Element; -}): JSX.Element { - const [value, setValue]: [ - string, - React.Dispatch> - ] = useState(""); - - function handleChange(v: string): void { - setValue(v); - action("onValueChange")(v); - } - - return props.children(value, handleChange); -} -const favoriteAnimalProps: Pick< - AutoSuggestProps, - "placeholder" | "listboxId" | "label" -> = { - placeholder: "Favorite animal", - listboxId: uniqueId(), - label: "Select your favorite animal", -}; - -storiesOf("AutoSuggest", module) - .add("Uncontrolled", () => ( - - - Cat - - - Dog - - - Turtle - - - )) - .add("Initial value", () => ( - - - Cat - - - Dog - - - Turtle - - - )) - .add("Controlled", () => ( - - {( - value: string, - onValueChange: AutoSuggestProps["onValueChange"] - ): JSX.Element => ( - - - Cat - - - Dog - - - Turtle - - - )} - - )) - .add("Disabled", () => ( - - - Cat - - - Dog - - - Turtle - - - )) - .add("filter", () => ( - - - Cat - - - Dog - - - Turtle - - - )) - .add("Menu open", () => ( - - - Cat - - - Dog - - - Turtle - - - )); diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx deleted file mode 100644 index ee592ca9421..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx +++ /dev/null @@ -1,630 +0,0 @@ -import { AutoSuggestClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { - classNames, - keyCodeArrowDown, - keyCodeArrowUp, - keyCodeEnter, - keyCodeEscape, - keyCodeTab, -} from "@microsoft/fast-web-utilities"; -import React from "react"; -import { isNil } from "lodash-es"; -import { Listbox, ListboxItemProps, TextField, TextFieldType } from "../index"; -import { DisplayNamePrefix } from "../utilities"; -import ListboxItem from "../listbox-item"; -import { AutoSuggestContext, AutoSuggestContextType } from "./auto-suggest-context"; -import { - AutoSuggestHandledProps, - AutoSuggestProps, - AutoSuggestUnhandledProps, -} from "./auto-suggest.props"; - -export interface AutoSuggestState { - value: string; - isMenuOpen: boolean; - focusedItem: ListboxItemProps; -} - -class AutoSuggest extends Foundation< - AutoSuggestHandledProps, - AutoSuggestUnhandledProps, - AutoSuggestState -> { - public static displayName: string = `${DisplayNamePrefix}AutoSuggest`; - - public static defaultProps: Partial = { - initialValue: "", - disabled: false, - placeholder: "", - managedClasses: {}, - filterSuggestions: false, - }; - - private static valuePropertyKey: string = "value"; - - /** - * Handled props instantiation - */ - protected handledProps: HandledProps = { - isMenuOpen: void 0, - disabled: void 0, - label: void 0, - inputRegion: void 0, - managedClasses: void 0, - initialValue: void 0, - value: void 0, - onValueChange: void 0, - onInvoked: void 0, - placeholder: void 0, - listboxId: void 0, - filterSuggestions: void 0, - }; - - private rootElement: React.RefObject = React.createRef< - HTMLDivElement - >(); - - private shouldFocusMenuOnNextRender: boolean = false; - - private storedValueString: string; - - /** - * constructor - */ - constructor(props: AutoSuggestProps) { - super(props); - - const value: string = - this.props.value === undefined ? this.props.initialValue : this.props.value; - - this.state = { - value, - focusedItem: null, - isMenuOpen: this.validateMenuState(false), - }; - - this.storedValueString = value; - } - - public componentDidUpdate(prevProps: AutoSuggestProps): void { - if ( - this.props.isMenuOpen !== undefined && - this.props.isMenuOpen !== prevProps.isMenuOpen - ) { - this.toggleMenu(this.props.isMenuOpen); - } else if ( - !this.state.isMenuOpen && - React.Children.count(this.renderChildren(prevProps.children)) === 0 && - React.Children.count(this.renderChildren()) > 0 && - !isNil(this.rootElement.current) && - this.rootElement.current.contains(document.activeElement) - ) { - // if the component has focus and a previously empty suggestions list is - // populated we should open the menu - this.toggleMenu(true); - } - - if (this.props.value !== prevProps.value) { - this.setState({ - value: this.props.value, - }); - } - } - - public componentDidMount(): void { - window.addEventListener("click", this.handleWindowClick); - } - - public componentWillUnmount(): void { - window.removeEventListener("click", this.handleWindowClick); - } - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( -
- - {this.renderInputRegion()} - {this.renderMenu()} - -
- ); - } - - /** - * Create class names - */ - protected generateClassNames(): string { - const { - autoSuggest, - autoSuggest__disabled, - autoSuggest__menuOpen, - }: AutoSuggestClassNameContract = this.props.managedClasses; - - return super.generateClassNames( - classNames( - autoSuggest, - [autoSuggest__disabled, this.props.disabled], - [autoSuggest__menuOpen, this.state.isMenuOpen] - ) - ); - } - - /** - * Determine which function to use to render content display (ie. the part of the control that shows when the menu isn't open) - * and invokes it - */ - private renderInputRegion(): React.ReactNode { - if (typeof this.props.inputRegion === "function") { - return this.props.inputRegion( - this.props, - this.state, - this.handleChange, - this.handleInputRegionClick, - this.handleInputRegionKeydown - ); - } else { - return this.defaultInputRegionRenderFunction( - this.props, - this.state, - this.handleChange, - this.handleInputRegionClick, - this.handleInputRegionKeydown - ); - } - } - - /** - * Determine which function to use to render the menu and invokes it - */ - private renderMenu(): React.ReactNode { - const shouldFocusOnMenu: boolean = this.shouldFocusMenuOnNextRender; - const { - autoSuggest_menu, - autoSuggest__disabled, - }: AutoSuggestClassNameContract = this.props.managedClasses; - - this.shouldFocusMenuOnNextRender = false; - - if (!this.state.isMenuOpen) { - return; - } - - const focusedItem: ListboxItemProps[] = - this.state.focusedItem !== null ? [this.state.focusedItem] : []; - return ( - - {this.renderChildren()} - - ); - } - - private renderChildren(alternateChildren?: React.ReactNode): React.ReactNode { - const children: React.ReactNode = isNil(alternateChildren) - ? this.props.children - : alternateChildren; - if (this.props.filterSuggestions) { - return React.Children.map( - children as React.ReactNode, - (node: React.ReactElement): React.ReactNode | null => { - if (!isNil(node.props)) { - if (node.props[AutoSuggest.valuePropertyKey] === undefined) { - return node; - } - return this.isMatch(node.props) ? node : null; - } - } - ); - } else { - return children; - } - } - - /** - * Determine if a single node is a match - */ - private isMatch(node: ListboxItemProps): boolean { - if (!isNil(this.storedValueString)) { - return node.value - .toLowerCase() - .includes(this.storedValueString.toLowerCase()); - } - } - - /** - * The default function that renders an unstyled content display - */ - private defaultInputRegionRenderFunction = ( - props: AutoSuggestProps, - state: AutoSuggestState, - onChange: (event: React.ChangeEvent) => void, - onClick: (event: React.MouseEvent) => void, - onKeyDown: (event: React.KeyboardEvent) => void - ): React.ReactNode => { - const listboxId: string = state.isMenuOpen ? props.listboxId : null; - const activedescendantId: string = - state.focusedItem !== null ? state.focusedItem.id : null; - return ( - - ); - }; - - /** - * Handle blur events - */ - private handleBlurCapture = (event: React.FocusEvent): void => { - if ( - this.state.isMenuOpen && - !isNil(this.rootElement.current) && - !this.rootElement.current.contains(event.relatedTarget as Element) - ) { - // close the menu when focus moves out of the component - this.toggleMenu(false); - } - }; - - /** - * Updates selection state and associated values - */ - private updateFocusedItem = (newSelection: ListboxItemProps[]): void => { - if (newSelection.length === 0) { - this.setState({ - focusedItem: null, - }); - } else { - this.setState({ - focusedItem: newSelection[0], - }); - this.updateValue(newSelection[0].value, true); - } - }; - - /** - * Handles clicks - */ - private handleInputRegionClick = (e: React.MouseEvent): void => { - if (this.props.disabled || e.defaultPrevented) { - return; - } - this.toggleMenu(true); - }; - - /** - * Handles item invoked - */ - private handleItemInvoked = (item: ListboxItemProps): void => { - this.invoke(item.value, item); - this.storedValueString = this.state.value; - this.toggleMenu(false); - }; - - /** - * Invokes the auto-select component - */ - private invoke = (value: string, item: ListboxItemProps): void => { - if (typeof this.props.onInvoked === "function") { - this.props.onInvoked(value, item); - } - }; - - /** - * Handles value changes from input element - */ - private handleChange = (e: React.ChangeEvent): void => { - const newValue: string = (e.target as HTMLInputElement).value; - this.storedValueString = newValue; - this.updateValue(newValue, false); - }; - - /** - * Update the currentValue of the component - */ - private updateValue = (newValue: string, isFromSuggestedOption: boolean): void => { - if (typeof this.props.onValueChange === "function") { - this.props.onValueChange(newValue, isFromSuggestedOption); - } - - if (isNil(this.props.value) && newValue !== this.state.value) { - this.toggleMenu(true); - this.setState({ - value: newValue, - }); - } - }; - - /** - * Handles input region key events - */ - private handleInputRegionKeydown = (e: React.KeyboardEvent): void => { - if (this.props.disabled || e.defaultPrevented) { - return; - } - - switch (e.keyCode) { - case keyCodeEnter: - this.invoke(this.state.value, null); - break; - - case keyCodeEscape: - this.toggleMenu(false); - break; - - case keyCodeArrowDown: - this.focusOnMenu(1); - e.preventDefault(); - break; - - case keyCodeArrowUp: - this.focusOnMenu(-1); - e.preventDefault(); - break; - - case keyCodeTab: - // Prevent default case handling for tab - break; - - default: - if (e.target instanceof HTMLInputElement) { - const newValue: string = (e.target as HTMLInputElement).value; - this.updateValue(newValue, false); - this.focusOnInput(); - break; - } - } - }; - - /** - * Handles menu key events - */ - private handleMenuKeydown = (e: React.KeyboardEvent): void => { - if (this.props.disabled || e.defaultPrevented) { - return; - } - switch (e.keyCode) { - case keyCodeEscape: - this.toggleMenu(false); - break; - - case keyCodeArrowDown: - if (this.checkForMenuEnd(1) === true) { - e.preventDefault(); - } - break; - - case keyCodeArrowUp: - if (this.checkForMenuEnd(-1) === true) { - e.preventDefault(); - } - break; - - default: - if (this.isValidInput(e)) { - this.focusOnInput(); - } - break; - } - }; - - /** - * test if a key press is a valid input - */ - private isValidInput = (e: React.KeyboardEvent): boolean => { - if ( - e.keyCode < 8 || - (e.keyCode > 8 && e.keyCode < 48) || - (e.keyCode > 90 && e.keyCode < 96) || - (e.keyCode > 111 && e.keyCode < 186) || - e.keyCode > 222 - ) { - return false; - } - return true; - }; - - /** - * Passes focus to the input element if focus would bump up against the ends of the menu, - * return true if result was focusing on input region - */ - private checkForMenuEnd = (increment: number): boolean => { - if (this.state.focusedItem === null) { - return false; - } - - const childrenAsArray: React.ReactNode[] = React.Children.toArray( - this.renderChildren() - ); - - const currentItemIndex: number = Listbox.getItemIndexById( - this.state.focusedItem.id, - this.renderChildren() - ); - - const startIndex: number = currentItemIndex + increment; - - if (startIndex > childrenAsArray.length - 1 || startIndex < 0) { - this.setState({ - value: this.storedValueString, - }); - // at the end of the list, focus on input - this.focusOnInput(); - return true; - } - - const endIndex: number = increment > -1 ? childrenAsArray.length - 1 : 0; - - const nextFocusableItem: ListboxItemProps = (Listbox.getFirstValidOptionInRange( - startIndex, - endIndex, - childrenAsArray, - increment - ) as React.ReactElement).props; - - if ( - nextFocusableItem === null || - nextFocusableItem.id === this.state.focusedItem.id - ) { - this.setState({ - value: this.storedValueString, - }); - // at the end of the list, focus on input - this.focusOnInput(); - return true; - } - - return false; - }; - - /** - * Opens menu and focuses on first or last valid item - */ - private focusOnMenu = (increment: number): void => { - this.storedValueString = this.state.value; - const childrenAsArray: React.ReactNode[] = React.Children.toArray( - this.renderChildren() - ); - - if (childrenAsArray.length === 0) { - return; - } - - const startIndex: number = increment > -1 ? 0 : childrenAsArray.length - 1; - const endIndex: number = increment > -1 ? childrenAsArray.length - 1 : 0; - this.focusFirstItemInRange(startIndex, endIndex, childrenAsArray, increment); - }; - - /** - * Gets first child in a range - */ - private focusFirstItemInRange = ( - startIndex: number, - endIndex: number, - childrenAsArray: React.ReactNode[], - increment: number - ): void => { - const validOption: React.ReactNode = Listbox.getFirstValidOptionInRange( - startIndex, - endIndex, - childrenAsArray, - increment - ); - if (validOption !== null) { - this.updateFocusedItem([(validOption as React.ReactElement).props]); - } - - if (!this.state.isMenuOpen) { - this.toggleMenu(true); - this.shouldFocusMenuOnNextRender = true; - return; - } - - if (validOption !== null) { - const element: HTMLElement = document.getElementById( - (validOption as React.ReactElement).props["id"] - ); - if (element !== null) { - element.focus(); - } - } - }; - - /** - * Toggles the menu - */ - private toggleMenu = (desiredMenuState: boolean): void => { - const updatedIsMenuOpen: boolean = this.validateMenuState(desiredMenuState); - if (updatedIsMenuOpen !== this.state.isMenuOpen) { - this.setState({ - isMenuOpen: updatedIsMenuOpen, - }); - if (this.state.isMenuOpen && !updatedIsMenuOpen) { - this.setState({ - value: this.storedValueString, - }); - this.focusOnInput(); - } - } - }; - - /** - * Focus on the input element - */ - private focusOnInput = (): void => { - if (this.rootElement.current === null) { - return; - } - const inputElements: HTMLCollectionOf = this.rootElement.current.getElementsByTagName( - "input" - ); - if (inputElements.length > 0) { - inputElements[0].focus(); - } - this.updateFocusedItem([]); - }; - - /** - * Determine menu state by comparing desired state to props - */ - private validateMenuState = (desiredMenuState: boolean): boolean => { - return typeof this.props.isMenuOpen === "boolean" - ? this.props.isMenuOpen - : React.Children.count(this.renderChildren()) === 0 - ? false - : desiredMenuState; - }; - - /** - * Close the menu when when there are clicks outside - */ - private handleWindowClick = (event: MouseEvent): void => { - if ( - this.state.isMenuOpen && - this.rootElement.current !== null && - !this.rootElement.current.contains(event.target as Element) - ) { - this.toggleMenu(false); - } - }; -} - -export default AutoSuggest; -export * from "./auto-suggest.props"; -export { AutoSuggestClassNameContract, AutoSuggestContext, AutoSuggestContextType }; diff --git a/packages/react/fast-components-react-base/src/auto-suggest/index.ts b/packages/react/fast-components-react-base/src/auto-suggest/index.ts deleted file mode 100644 index f7451c67571..00000000000 --- a/packages/react/fast-components-react-base/src/auto-suggest/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import AutoSuggest from "./auto-suggest"; -import autoSuggestSchema from "./auto-suggest.schema"; -import autoSuggestSchema2 from "./auto-suggest.schema.2"; - -export { autoSuggestSchema, autoSuggestSchema2 }; -export default AutoSuggest; -export * from "./auto-suggest"; diff --git a/packages/react/fast-components-react-base/src/badge/README.md b/packages/react/fast-components-react-base/src/badge/README.md deleted file mode 100644 index 592a76e3255..00000000000 --- a/packages/react/fast-components-react-base/src/badge/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Badge - -The *badge* component is a short inline [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) element call-out used to attract attention or flag status, such as “New”, “Sale”, or other short phrases. It is not interactive, however, it generally overlays interactive content or is positioned close to a commanding component. - -## Usage - -Keep the *badge* label short and succinct – it should not be a sentence or a long phrase (recommend 2-3 words). Short phrases are work well, such as “App of the day,” but keep in mind that they will generally become longer when localized. Keep the text to nouns and adjectives if possible (e.g. “New” or “New today”), so the user won’t think it is an actionable element. diff --git a/packages/react/fast-components-react-base/src/badge/badge.props.ts b/packages/react/fast-components-react-base/src/badge/badge.props.ts deleted file mode 100644 index cb64a178518..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.props.ts +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { - BadgeClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type BadgeManagedClasses = ManagedClasses; -export type BadgeUnhandledProps = React.HTMLAttributes; -export interface BadgeHandledProps extends BadgeManagedClasses { - /** - * The badge children - */ - children?: React.ReactNode; -} - -export type BadgeProps = BadgeHandledProps & BadgeUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/badge/badge.schema.2.ts b/packages/react/fast-components-react-base/src/badge/badge.schema.2.ts deleted file mode 100644 index e9dd17b1dd3..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.schema.2.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Badge", - description: "A badge component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/badge", - formPluginId: "@microsoft/fast-components-react-base/badge", - properties: { - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/badge/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/badge/badge.schema.json b/packages/react/fast-components-react-base/src/badge/badge.schema.json deleted file mode 100644 index 125e14dacc7..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "Badge", - "description": "A badge component's schema definition.", - "type": "object", - "id": "@microsoft/fast-components-react-base/badge", - "formPluginId": "@microsoft/fast-components-react-base/badge", - "properties": {}, - "reactProperties": { - "children": { - "title": "Children", - "type": "children", - "formPluginId": "@microsoft/fast-components-react-base/badge/children", - "defaults": [ - "text" - ] - } - } -} diff --git a/packages/react/fast-components-react-base/src/badge/badge.schema.ts b/packages/react/fast-components-react-base/src/badge/badge.schema.ts deleted file mode 100644 index 7453283cd8d..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.schema.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Badge", - description: "A badge component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/badge", - formPluginId: "@microsoft/fast-components-react-base/badge", - properties: {}, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/badge/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/badge/badge.spec.tsx b/packages/react/fast-components-react-base/src/badge/badge.spec.tsx deleted file mode 100644 index c49dd077d40..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.spec.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Badge, { BadgeHandledProps, BadgeProps, BadgeUnhandledProps } from "./index"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("badge", (): void => { - test("should have a displayName that includes the component name", () => { - expect(`${DisplayNamePrefix}${(Badge as any).name}`).toBe(Badge.displayName); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should accept unhandledProps", () => { - const handledProps: BadgeHandledProps = { - children: "foo", - }; - - const unhandledProps: BadgeUnhandledProps = { - "aria-hidden": true, - }; - - const props: BadgeProps = { ...handledProps, ...unhandledProps }; - - const rendered: any = mount(); - - expect(rendered.find("span").prop("aria-hidden")).toEqual(true); - }); -}); diff --git a/packages/react/fast-components-react-base/src/badge/badge.stories.tsx b/packages/react/fast-components-react-base/src/badge/badge.stories.tsx deleted file mode 100644 index c3a29ba7b63..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.stories.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import Badge from "./"; - -storiesOf("Badge", module).add("Badge", () => Badge); diff --git a/packages/react/fast-components-react-base/src/badge/badge.tsx b/packages/react/fast-components-react-base/src/badge/badge.tsx deleted file mode 100644 index 7e33eab8ecd..00000000000 --- a/packages/react/fast-components-react-base/src/badge/badge.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { BadgeClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { BadgeHandledProps, BadgeProps, BadgeUnhandledProps } from "./badge.props"; - -class Badge extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Badge`; - - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - managedClasses: void 0, - }; - - /** - * Renders the component - */ - public render(): JSX.Element { - return ( - - {this.props.children} - - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames(classNames(this.props.managedClasses.badge)); - } -} - -export default Badge; -export * from "./badge.props"; -export { BadgeClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/badge/index.ts b/packages/react/fast-components-react-base/src/badge/index.ts deleted file mode 100644 index 073607e3813..00000000000 --- a/packages/react/fast-components-react-base/src/badge/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Badge from "./badge"; -import badgeSchema from "./badge.schema"; -import badgeSchema2 from "./badge.schema.2"; - -export { badgeSchema, badgeSchema2 }; -export default Badge; -export * from "./badge"; diff --git a/packages/react/fast-components-react-base/src/breadcrumb/README.md b/packages/react/fast-components-react-base/src/breadcrumb/README.md deleted file mode 100644 index d8a59b06736..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/README.md +++ /dev/null @@ -1,8 +0,0 @@ -## Breadcrumb -A generic breadcrumb component following the w3.org [breadcrumb](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/breadcrumb/index.html) pattern. The *breadcrumb* will accept any child elements but is built to work with `a` elements. - -### Usage -To denote the current page the *breadcrumb* automatically sets the last child `aria-current` prop to "page", an enumerated type value for `aria-current`. Addtionally *breadcrumb* accepts an optional `separator` prop that will render a ReactNode between navigation elements. - -### Accessibility -The *breadcrumb* component consists of a `nav` element with `aria-label` set to a `label` prop. One should set the `label` prop to identify the structure as a breadcrumb trail and make it a navigation landmark so that it is easy to locate. The last child element `aria-current` prop is marked "page" to indicate that it reprents the current page. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.props.ts b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.props.ts deleted file mode 100644 index f8d27b3bc8f..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.props.ts +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { - BreadcrumbClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type BreadcrumbManagedClasses = ManagedClasses; -export type BreadcrumbUnhandledProps = React.HTMLAttributes; -export interface BreadcrumbHandledProps extends BreadcrumbManagedClasses { - /** - * The breadcrumb children - */ - children?: React.ReactNode; - - /** - * The aria-label to provide an accessible name for the breadcrumb - */ - label?: string; - - /** - * The breadcrumb seprator - */ - separator?: (className: string) => React.ReactNode; -} - -export type BreadcrumbProps = BreadcrumbHandledProps & BreadcrumbUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.2.ts b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.2.ts deleted file mode 100644 index 9398f1d27d0..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.2.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Breadcrumb", - description: "A breadcrumb component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/breadcrumb", - formPluginId: "@microsoft/fast-components-react-base/breadcrumb", - properties: { - label: { - title: "label", - type: "string", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/breadcrumb/children", - }, - separator: { - ...linkedDataSchema, - formPluginId: - "@microsoft/fast-components-react-base/badbreadcrumbge/separator", - pluginId: "@microsoft/fast-components-react-base/breadcrumb/separator", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.ts b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.ts deleted file mode 100644 index 6ad116d4284..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.schema.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Breadcrumb", - description: "A breadcrumb component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/breadcrumb", - formPluginId: "@microsoft/fast-components-react-base/breadcrumb", - properties: { - label: { - title: "label", - type: "string", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/breadcrumb/children", - defaults: ["text"], - }, - separator: { - title: "Separator", - type: "children", - formPluginId: - "@microsoft/fast-components-react-base/badbreadcrumbge/separator", - pluginId: "@microsoft/fast-components-react-base/breadcrumb/separator", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx deleted file mode 100644 index b5af2fafed3..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow, ShallowWrapper } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Breadcrumb, { - BreadcrumbClassNameContract, - BreadcrumbUnhandledProps, -} from "./breadcrumb"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -const managedClasses: BreadcrumbClassNameContract = { - breadcrumb: "breadcrumb-class", - breadcrumb_item: "breadcrumb-item-class", - breadcrumb_item__current: "breadcrumb-item-current-class", - breadcrumb_itemsContainer: "breadcrumb-items-container-class", - breadcrumb_separator: "breadcrumb-separator-class", -}; - -describe("breadcrumb", (): void => { - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Breadcrumb as any).name}`).toBe( - Breadcrumb.displayName - ); - }); - - test("should have correct root element type 'nav'", () => { - const rendered: ShallowWrapper = shallow(); - expect(rendered.type()).toBe("nav"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow( - { - return
\
; - }} - > - - - - ); - }).not.toThrow(); - }); - - test("should implement unhandledProps", (): void => { - const unhandledProps: BreadcrumbUnhandledProps = { - "aria-controls": "controls", - }; - - const rendered: any = shallow(); - - expect(rendered.first().prop("aria-controls")).toEqual("controls"); - }); - - test("should set current class name on last rendered", (): void => { - const rendered: any = mount( - - - - - - - ); - - const lastItem: any = rendered.findWhere((element: any) => { - return element.props()["aria-current"] !== undefined; - }); - - expect(lastItem.props()["className"]).toContain("breadcrumb-item-current-class"); - }); - - test("should not clobber custom class name on last rendered", (): void => { - const rendered: any = mount( - - - - - - - ); - - const lastItem: any = rendered.findWhere((element: any) => { - return element.props()["aria-current"] !== undefined; - }); - - const className: string = lastItem.props()["className"]; - expect(className).toContain("breadcrumb-item-current-class"); - expect(className).toContain("Test"); - expect(className).not.toContain("Testbreadcrumb-item-current-class"); - expect(className).not.toContain("breadcrumb-item-current-classTest"); - }); - - test("should set seprator class name on seperator if the `separator` prop is passed", () => { - const rendered: any = shallow( - { - return
\
; - }} - > - - - - ); - - expect(rendered.exists("div.breadcrumb-separator-class")).toBe(true); - }); - - test("should not set undefined if classes are not defined", () => { - const missingManagedClasses: BreadcrumbClassNameContract = { - breadcrumb: "breadcrumb-class", - breadcrumb_itemsContainer: "breadcrumb-items-container-class", - }; - const rendered: any = shallow( - { - return
\
; - }} - > - - - - ); - - expect(rendered.exists("a.undefined")).toBe(false); - expect(rendered.exists("div.undefined")).toBe(false); - }); -}); diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.stories.tsx b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.stories.tsx deleted file mode 100644 index 647dee9d601..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import Hypertext from "../hypertext"; -import Breadcrumb from "./"; - -function separator(className?: string): JSX.Element { - return /; -} -storiesOf("Breadcrumb", module) - .add("Default", () => ( - - Item one - Item Two - Item Three - - )) - .add("With label", () => ( - - Item one - Item Two - Item Three - - )); diff --git a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.tsx b/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.tsx deleted file mode 100644 index e70551d2a67..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/breadcrumb.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { BreadcrumbClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { - BreadcrumbHandledProps, - BreadcrumbProps, - BreadcrumbUnhandledProps, -} from "./breadcrumb.props"; - -class Breadcrumb extends Foundation< - BreadcrumbHandledProps, - BreadcrumbUnhandledProps, - {} -> { - public static displayName: string = `${DisplayNamePrefix}Breadcrumb`; - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - children: void 0, - label: void 0, - separator: void 0, - managedClasses: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( - - ); - } - - /** - * Create class names - */ - protected generateClassNames(): string { - return super.generateClassNames(classNames(this.props.managedClasses.breadcrumb)); - } - - /** - * Create items container class names - */ - protected generateItemsContainerClassNames(): string { - return classNames(this.props.managedClasses.breadcrumb_itemsContainer); - } - - /** - * Create item class names - */ - protected generateItemClassNames(): string { - return classNames(this.props.managedClasses.breadcrumb_item); - } - - /** - * Create current item class names - */ - protected generateCurrentItemClassNames(): string { - return classNames(this.props.managedClasses.breadcrumb_item__current); - } - - /** - * Create separator class names - */ - protected generateSeparatorClassNames(): string { - return classNames(this.props.managedClasses.breadcrumb_separator); - } - - /** - * Render all child elements - */ - private renderChildren(): React.ReactFragment[] { - return React.Children.map(this.props.children, this.renderChild); - } - - private isClonableElement(node: React.ReactNode): node is React.ReactElement { - return React.isValidElement(node); - } - - /** - * Render a single child - */ - private renderChild = ( - child: React.ReactNode, - index: number - ): React.ReactFragment => { - const childCount: number = React.Children.count(this.props.children); - let augmentedChild: React.ReactNode = child; - const isLastItem: boolean = childCount - 1 === index; - - if (this.isClonableElement(child)) { - const props: any = { - className: classNames( - child.props && child.props.className, - this.generateItemClassNames(), - [this.generateCurrentItemClassNames(), isLastItem] - ), - "aria-current": isLastItem ? "page" : undefined, - }; - - augmentedChild = React.cloneElement(child, props); - } - return ( -
  • - {augmentedChild} - {typeof this.props.separator === "function" && !isLastItem - ? this.props.separator(this.generateSeparatorClassNames()) - : null} -
    • - ); - }; -} - -export default Breadcrumb; -export * from "./breadcrumb.props"; -export { BreadcrumbClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/breadcrumb/index.ts b/packages/react/fast-components-react-base/src/breadcrumb/index.ts deleted file mode 100644 index 83141a143d8..00000000000 --- a/packages/react/fast-components-react-base/src/breadcrumb/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Breadcrumb from "./breadcrumb"; -import breadcrumbSchema from "./breadcrumb.schema"; -import breadcrumbSchema2 from "./breadcrumb.schema.2"; - -export { breadcrumbSchema, breadcrumbSchema2 }; -export default Breadcrumb; -export * from "./breadcrumb"; diff --git a/packages/react/fast-components-react-base/src/button/README.md b/packages/react/fast-components-react-base/src/button/README.md deleted file mode 100644 index 088e13f6448..00000000000 --- a/packages/react/fast-components-react-base/src/button/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Button -*Buttons* are commonly used for final actions that complete a user work flow and the text should communicate what will happen after interaction. Typical use cases include submitting a form, closing a *doalog*, or saving settings. The *button* component can be either an [anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) or [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) element. - -## Accessibility -Consult the current [W3C WAI-ARIA documentation](https://www.w3.org/TR/wai-aria-practices/#button) for best practices. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/button/button.props.ts b/packages/react/fast-components-react-base/src/button/button.props.ts deleted file mode 100644 index 91173eb33dc..00000000000 --- a/packages/react/fast-components-react-base/src/button/button.props.ts +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { - ButtonClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type ButtonManagedClasses = ManagedClasses; -export type ButtonUnhandledProps = React.AllHTMLAttributes; -export interface ButtonHandledProps extends ButtonManagedClasses { - /** - * The button content - */ - children?: React.ReactNode; - - /** - * The disabled state - */ - disabled?: boolean; - - /** - * The destination address (turns button to anchor) - */ - href?: string; -} - -export type ButtonProps = ButtonUnhandledProps & ButtonHandledProps; diff --git a/packages/react/fast-components-react-base/src/button/button.schema.2.ts b/packages/react/fast-components-react-base/src/button/button.schema.2.ts deleted file mode 100644 index c4ed160ebf8..00000000000 --- a/packages/react/fast-components-react-base/src/button/button.schema.2.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Button", - description: "A button component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/button", - formPluginId: "@microsoft/fast-components-react-base/button", - properties: { - disabled: { - title: "Disabled", - type: "boolean", - }, - href: { - title: "HTML href attribute", - type: "string", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/button/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/button/button.schema.ts b/packages/react/fast-components-react-base/src/button/button.schema.ts deleted file mode 100644 index 984a3b89d2c..00000000000 --- a/packages/react/fast-components-react-base/src/button/button.schema.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Button", - description: "A button component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/button", - formPluginId: "@microsoft/fast-components-react-base/button", - properties: { - disabled: { - title: "Disabled", - type: "boolean", - }, - href: { - title: "HTML href attribute", - type: "string", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/button/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/button/button.spec.tsx b/packages/react/fast-components-react-base/src/button/button.spec.tsx deleted file mode 100644 index 7fff18f6645..00000000000 --- a/packages/react/fast-components-react-base/src/button/button.spec.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Button, { - ButtonClassNameContract, - ButtonHandledProps, - ButtonProps, - ButtonUnhandledProps, -} from "./button"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("button", (): void => { - const managedClasses: ButtonClassNameContract = { - button: "test-button", - }; - const href: string = "https://www.microsoft.com"; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Button as any).name}`).toBe(Button.displayName); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow( - ); - - expect(rendered.prop("children")).not.toBe(undefined); - expect(rendered.prop("children")).toEqual("Children"); - }); - - // parametrized button class name tests - [ - { - name: "should correctly assign className from input props", - buttonHandledProps: {} as ButtonHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled and root class name is empty", - buttonHandledProps: { disabled: true } as ButtonHandledProps, - className: "", - expectedClassName: null, - }, - { - name: "should correctly assign className when is disabled", - buttonHandledProps: { disabled: true } as ButtonHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled (name not present) and managed class given", - buttonHandledProps: { - disabled: true, - managedClasses: { - button: "button-class", - }, - } as ButtonHandledProps, - className: "", - expectedClassName: "button-class", - }, - { - name: - "should correctly assign className when is disabled (name present) and managed class given", - buttonHandledProps: { - disabled: true, - managedClasses: { - button: "button-class", - button__disabled: "disabled", - }, - } as ButtonHandledProps, - className: "", - expectedClassName: "button-class disabled", - }, - { - name: - "should correctly assign className when is disabled (name present), managed and root class name present", - buttonHandledProps: { - disabled: true, - managedClasses: { - button: "button-name", - button__disabled: "disabled", - }, - } as ButtonHandledProps, - className: "root-name", - expectedClassName: "button-name disabled root-name", - }, - ].forEach(({ name, buttonHandledProps, className, expectedClassName }: any) => { - test(name, () => { - const buttonProps: ButtonProps = { ...buttonHandledProps }; - - const rendered: any = shallow( - ) - .add("As Anchor", () => ); diff --git a/packages/react/fast-components-react-base/src/button/button.tsx b/packages/react/fast-components-react-base/src/button/button.tsx deleted file mode 100644 index 8519ee99294..00000000000 --- a/packages/react/fast-components-react-base/src/button/button.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { ButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { ButtonHandledProps, ButtonProps, ButtonUnhandledProps } from "./button.props"; - -/** - * Button HTML tags - */ -export enum ButtonHTMLTags { - a = "a", - button = "button", -} - -class Button extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Button`; - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - disabled: void 0, - href: void 0, - managedClasses: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( - - {this.props.children} - - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - const { - button, - button__disabled, - }: ButtonClassNameContract = this.props.managedClasses; - - return super.generateClassNames( - classNames(button, [button__disabled, this.props.disabled]) - ); - } - - /** - * Stores HTML tag for use in render - */ - private renderDisabledAttribute(): object { - if (this.props.disabled === true) { - return this.tag === ButtonHTMLTags.a - ? { "aria-disabled": true } - : { disabled: true }; - } - } - - /** - * Stores HTML tag for use in render - */ - private get tag(): any { - return typeof this.props.href === "string" - ? ButtonHTMLTags.a - : ButtonHTMLTags.button; - } -} - -export default Button; -export * from "./button.props"; -export { ButtonClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/button/index.ts b/packages/react/fast-components-react-base/src/button/index.ts deleted file mode 100644 index 7bdfa9f4a20..00000000000 --- a/packages/react/fast-components-react-base/src/button/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Button from "./button"; -import buttonSchema from "./button.schema"; -import buttonSchema2 from "./button.schema.2"; - -export { buttonSchema, buttonSchema2 }; -export default Button; -export * from "./button"; diff --git a/packages/react/fast-components-react-base/src/card/README.md b/packages/react/fast-components-react-base/src/card/README.md deleted file mode 100644 index 5c8861a02e5..00000000000 --- a/packages/react/fast-components-react-base/src/card/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Card -*Cards* are snapshots of content that are typically used in a group to present collections of related information. *Cards* can represent any quickly consumable information. The *card* component can be either a [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), or [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) element. diff --git a/packages/react/fast-components-react-base/src/card/card.props.ts b/packages/react/fast-components-react-base/src/card/card.props.ts deleted file mode 100644 index 0465c0e9ca9..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.props.ts +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { - CardClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * Card HTML tags - */ -export enum CardTag { - article = "article", - div = "div", - section = "section", -} - -export type CardManagedClasses = ManagedClasses; -export type CardUnhandledProps = React.HTMLAttributes; -export interface CardHandledProps extends CardManagedClasses { - /** - * The card children - */ - children?: React.ReactNode; - - /** - * Use the appropriate HTML tag type depending on context - */ - tag?: CardTag; -} - -export type CardProps = CardHandledProps & CardUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/card/card.schema.2.ts b/packages/react/fast-components-react-base/src/card/card.schema.2.ts deleted file mode 100644 index fc4137719b9..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.schema.2.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Card", - description: "A card component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/card", - formPluginId: "@microsoft/fast-components-react-base/card", - properties: { - tag: { - title: "HTML tag", - type: "string", - enum: ["article", "div", "section"], - default: "div", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/card/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/card/card.schema.ts b/packages/react/fast-components-react-base/src/card/card.schema.ts deleted file mode 100644 index 10a0ce98ea1..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.schema.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Card", - description: "A card component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/card", - formPluginId: "@microsoft/fast-components-react-base/card", - properties: { - tag: { - title: "HTML tag", - type: "string", - enum: ["article", "div", "section"], - default: "div", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/card/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/card/card.spec.tsx b/packages/react/fast-components-react-base/src/card/card.spec.tsx deleted file mode 100644 index 5debb4c48f4..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.spec.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Card, { - CardClassNameContract, - CardHandledProps, - CardProps, - CardTag, - CardUnhandledProps, -} from "./card"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("card", (): void => { - const managedClasses: CardClassNameContract = { - card: "card", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Card as any).name}`).toBe(Card.displayName); - }); - - test("should return an object that includes all valid props which are not enumerated as handledProps", () => { - const handledProps: CardHandledProps = { - managedClasses, - }; - - const unhandledProps: CardUnhandledProps = { - "aria-hidden": true, - }; - - const props: CardProps = { ...handledProps, ...unhandledProps }; - - const rendered: any = shallow(); - - expect(rendered.prop("aria-hidden")).not.toBe(undefined); - expect(rendered.prop("aria-hidden")).toEqual(true); - }); - - test("should render by default as a `div` element", () => { - const rendered: any = shallow(); - - expect(rendered.type()).toBe("div"); - }); - - test("should render as a `section` element if the `prop.tag` is equal to `section`", () => { - const rendered: any = shallow( - - ); - - expect(rendered.type()).toBe("section"); - }); - - test("should render as a `article` element if the `prop.tag` is equal to `article`", () => { - const rendered: any = shallow( - - ); - - expect(rendered.type()).toBe("article"); - }); -}); diff --git a/packages/react/fast-components-react-base/src/card/card.stories.tsx b/packages/react/fast-components-react-base/src/card/card.stories.tsx deleted file mode 100644 index 94fe98f1db2..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import Image from "../image"; -import Card from "./"; - -storiesOf("Card", module).add("Default with children", () => ( - - {"Placeholder - -)); diff --git a/packages/react/fast-components-react-base/src/card/card.tsx b/packages/react/fast-components-react-base/src/card/card.tsx deleted file mode 100644 index bc9a0948e84..00000000000 --- a/packages/react/fast-components-react-base/src/card/card.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { CardClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { CardHandledProps, CardProps, CardTag, CardUnhandledProps } from "./card.props"; - -class Card extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Card`; - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - children: void 0, - managedClasses: void 0, - tag: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( - - {this.props.children} - - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames(classNames(this.props.managedClasses.card)); - } - - /** - * Stores HTML tag for use in render - */ - private get tag(): any { - return CardTag[this.props.tag] || CardTag.div; - } -} - -export default Card; -export * from "./card.props"; -export { CardClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/card/index.ts b/packages/react/fast-components-react-base/src/card/index.ts deleted file mode 100644 index 4c0436b673e..00000000000 --- a/packages/react/fast-components-react-base/src/card/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Card from "./card"; -import cardSchema from "./card.schema"; -import cardSchema2 from "./card.schema.2"; - -export { cardSchema, cardSchema2 }; -export default Card; -export * from "./card"; diff --git a/packages/react/fast-components-react-base/src/checkbox/DOCS.md b/packages/react/fast-components-react-base/src/checkbox/DOCS.md deleted file mode 100644 index 4cb6755823f..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/DOCS.md +++ /dev/null @@ -1,8 +0,0 @@ -## Best practices -Use a *checkbox* to select or deselect items in a list. Use a single *checkbox* by itself in a *toggle* scenario (e.g. "remember me" in a login scenario). Use it within a group for multi-select scenarios, where a user chooses one or more items from a group of choices that are NOT mutually exclusive. - -### Usage guidance -*Checkboxes* can be grouped in collections where checking/unchecking the collection *checkbox* can facilitate choosing all or none within the collection, while also preserving the ability to check/uncheck sub-choices. When a collection of sub-choices have both checked and unchecked items, the parent *checkbox* needs to display as indeterminate. The indeterminate functionality is beyond the scope of the framework and is the responsibility of the consuming team. - -## Accessibility -Valid markup requires *checkbox* to be used inside a form with a submit button. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/checkbox/README.md b/packages/react/fast-components-react-base/src/checkbox/README.md deleted file mode 100644 index 8a4fbfa703f..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Checkbox -The [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) component is an input form element used to select or deselect items in a list. *Checkboxes* have three visual states: checked, unchecked, and indeterminate. - -## Accessibility -Consult the current [W3C WAI-ARIA documentation](https://www.w3.org/TR/wai-aria-practices/#checkbox) for best practices. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.props.ts b/packages/react/fast-components-react-base/src/checkbox/checkbox.props.ts deleted file mode 100644 index 7988dfe3317..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.props.ts +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; -import { - CheckboxClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * @deprecated - * Slots have been deprecated and will be removed in the next major version - * Use the `label` prop instead - */ -export enum CheckboxSlot { - label = "label", -} - -export type CheckboxManagedClasses = ManagedClasses; -export type CheckboxUnhandledProps = Omit< - React.HTMLAttributes, - "aria-label" ->; -export interface CheckboxHandledProps extends CheckboxManagedClasses { - /** - * The id of the checkbox input element - */ - inputId: string; - - /** - * The checked state - */ - checked?: boolean; - - /** - * The disabled state - */ - disabled?: boolean; - - /** - * The name of the input - */ - name?: string; - - /** - * The indeterminate option - */ - indeterminate?: boolean; - - /** - * The onChange event handler - */ - onChange?: (event?: React.ChangeEvent) => void; - - /** - * The checkbox label - */ - label?: (className: string) => React.ReactNode; - - /** - * The checkbox aria-label - * This is necessary due to how unhandledProps are passed to the root of the component - */ - ariaLabel?: string; - - /** - * The value of the checkbox - */ - value?: string; -} - -export type CheckboxProps = CheckboxHandledProps & CheckboxUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.2.ts b/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.2.ts deleted file mode 100644 index a7a08eb6e5a..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.2.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Checkbox", - description: "A checkbox component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/checkbox", - formPluginId: "@microsoft/fast-components-react-base/checkbox", - properties: { - checked: { - title: "Checked", - type: "boolean", - }, - disabled: { - title: "Disabled", - type: "boolean", - }, - indeterminate: { - title: "Indeterminate", - type: "boolean", - }, - inputId: { - title: "Input element ID", - type: "string", - }, - ariaLabel: { - title: "Aria-label", - type: "string", - examples: ["label"], - }, - name: { - title: "Name", - type: "string", - examples: ["name"], - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/checkbox/children", - }, - label: { - ...linkedDataSchema, - title: "Label", - formPluginId: "@microsoft/fast-components-react-base/checkbox/label", - pluginId: "@microsoft/fast-components-react-base/checkbox/label", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.ts b/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.ts deleted file mode 100644 index b9e603ba3b3..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.schema.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Checkbox", - description: "A checkbox component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/checkbox", - formPluginId: "@microsoft/fast-components-react-base/checkbox", - properties: { - checked: { - title: "Checked", - type: "boolean", - }, - disabled: { - title: "Disabled", - type: "boolean", - }, - indeterminate: { - title: "Indeterminate", - type: "boolean", - }, - inputId: { - title: "Input element ID", - type: "string", - }, - ariaLabel: { - title: "Aria-label", - type: "string", - examples: ["label"], - }, - name: { - title: "Name", - type: "string", - examples: ["name"], - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/checkbox/children", - }, - label: { - title: "Label", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/checkbox/label", - pluginId: "@microsoft/fast-components-react-base/checkbox/label", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.spec.tsx b/packages/react/fast-components-react-base/src/checkbox/checkbox.spec.tsx deleted file mode 100644 index 155a03f6724..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.spec.tsx +++ /dev/null @@ -1,280 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow, ShallowWrapper } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Checkbox, { - CheckboxClassNameContract, - CheckboxHandledProps, - CheckboxProps, - CheckboxSlot, - CheckboxUnhandledProps, -} from "./checkbox"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("checkbox", (): void => { - const managedClasses: CheckboxClassNameContract = { - checkbox: "checkbox-class", - checkbox__disabled: "disabled-class", - checkbox_input: "input-class", - checkbox_label: "label-class", - checkbox_stateIndicator: "span-class", - }; - - const inputSelector: string = `.${managedClasses.checkbox_input}`; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Checkbox as any).name}`).toBe( - Checkbox.displayName - ); - }); - - test("should have correct input attribute type 'checkbox'", () => { - const rendered: ShallowWrapper = shallow(); - expect(rendered.find("#id").prop("type")).toBe("checkbox"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - shallow(); - }).not.toThrow(); - }); - - test("should implement unhandledProps", () => { - const handledProps: CheckboxHandledProps = { - managedClasses, - inputId: "id", - }; - - const unhandledProps: CheckboxUnhandledProps = { - "aria-hidden": true, - }; - - const props: CheckboxProps = { ...handledProps, ...unhandledProps }; - - const rendered: any = shallow(); - - expect(rendered.first().prop("aria-hidden")).toEqual(true); - }); - - test("should add a class and `disabled` attribute to the input element when the disabled prop is true", () => { - const rendered: any = shallow( - - ); - - expect(rendered.hasClass("disabled-class")).toBe(true); - expect(rendered.find(".input-class[disabled]")).not.toBe(undefined); - expect(rendered.find(".input-class[disabled]").prop("disabled")).toBe(true); - }); - - test("should add `name` attribute to the input element when the name prop is passed", () => { - const checkboxName: string = "checkbox-name"; - const rendered: any = shallow( - - ); - - expect(rendered.find(".input-class").prop("name")).toBe(checkboxName); - }); - - test("should apply a aria-label to the input element when the `ariaLabel` prop is passed", (): void => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").prop("aria-label")).toBe("label"); - }); - - test("should initialize as unchecked if the `checked` prop is not provided", () => { - expect( - shallow().state( - "checked" - ) - ).toBe(false); - }); - - test("should allow a change event to update the checked state when no `checked` prop is provided", () => { - const rendered: any = shallow( - - ); - - expect(rendered.state("checked")).toBe(false); - - rendered.find(inputSelector).simulate("change"); - - expect(rendered.state("checked")).toBe(true); - }); - - test("should call a registerd callback after a change event", () => { - const onChange: any = jest.fn(); - const controlled: any = shallow( - - ); - const uncontrolled: any = shallow( - - ); - - controlled.find(inputSelector).simulate("change"); - - expect(onChange).toHaveBeenCalledTimes(1); - - uncontrolled.find(inputSelector).simulate("change"); - - expect(onChange).toHaveBeenCalledTimes(2); - }); - - test("should not allow a change event to update the checked state if props.checked is provided", () => { - const rendered: any = shallow( - - ); - - expect(rendered.state("checked")).toEqual(false); - rendered.find(inputSelector).simulate("change"); - expect(rendered.state("checked")).toEqual(false); - - rendered.setProps({ checked: true }); - expect(rendered.state("checked")).toEqual(true); - rendered.find(inputSelector).simulate("change"); - expect(rendered.state("checked")).toEqual(true); - }); - - test("should accept a slotted label", () => { - const rendered: any = mount( - -
    - Hello world -
    -     - ); - - expect(rendered.exists(".test-class")); - expect(rendered.find(".test-class").prop("className")).toContain( - managedClasses.checkbox_label - ); - }); - - test("should accept a ReactNode with a className of `label` when passed to the `label` prop", (): void => { - const checkboxId: string = "id01"; - const label: (className: string) => React.ReactNode = ( - className: string - ): React.ReactNode => ( - - ); - const rendered: any = mount( - - ); - - expect(rendered.find(".customLabel").length).toBe(1); - expect(rendered.find(".customLabel").prop("className")).toContain( - managedClasses.checkbox_label - ); - }); - - test("should apply a value prop to the input element", (): void => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").prop("value")).toBe("myValue"); - }); - - // parametrized checkbox class name tests - [ - { - name: "should correctly assign className from input props", - checkboxHandledProps: {} as CheckboxHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled and root class name is empty", - checkboxHandledProps: { disabled: true } as CheckboxHandledProps, - className: "", - expectedClassName: null, - }, - { - name: "should correctly assign className when is disabled", - checkboxHandledProps: { disabled: true } as CheckboxHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled (name not present) and managed class given", - checkboxHandledProps: { - disabled: true, - managedClasses: { - checkbox: "checkbox-class", - }, - } as CheckboxHandledProps, - className: "", - expectedClassName: "checkbox-class", - }, - { - name: - "should correctly assign className when is disabled (name present) and managed class given", - checkboxHandledProps: { - disabled: true, - managedClasses: { - checkbox: "checkbox-class", - checkbox__disabled: "disabled", - }, - } as CheckboxHandledProps, - className: "", - expectedClassName: "checkbox-class disabled", - }, - { - name: - "should correctly assign className when is disabled (name present), managed and root class name present", - checkboxHandledProps: { - disabled: true, - managedClasses: { - checkbox: "checkbox-name", - checkbox__disabled: "disabled", - }, - } as CheckboxHandledProps, - className: "root-name", - expectedClassName: "checkbox-name disabled root-name", - }, - { - name: - "should correctly assign className when is indeterminate (name present), managed and root class name present", - checkboxHandledProps: { - indeterminate: true, - managedClasses: { - checkbox: "checkbox-name", - checkbox__indeterminate: "indeterminate", - }, - } as CheckboxHandledProps, - className: "root-name", - expectedClassName: "checkbox-name indeterminate root-name", - }, - ].forEach(({ name, checkboxHandledProps, className, expectedClassName }: any) => { - test(name, () => { - const props: CheckboxProps = { ...checkboxHandledProps }; - - const rendered: any = shallow(); - - expect(rendered.prop("className")).toEqual(expectedClassName); - }); - }); -}); diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.stories.tsx b/packages/react/fast-components-react-base/src/checkbox/checkbox.stories.tsx deleted file mode 100644 index c80ac802ec5..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React, { useState } from "react"; -import { uniqueId } from "lodash-es"; -import { action } from "@storybook/addon-actions"; -import Label from "../label"; -import Checkbox from "./"; - -/** - * Simple state manager to track and update checked properties - */ -function CheckboxStateHandler(props: { - children: ( - checked: boolean, - onChange: React.ChangeEventHandler - ) => JSX.Element; -}): JSX.Element { - const [checked, setChecked]: [ - boolean, - React.Dispatch> - ] = useState(true); - - function handleChange(e: React.ChangeEvent): void { - setChecked(e.target.checked); - action("onChange")(e); - } - - return props.children(checked, handleChange); -} - -storiesOf("Checkbox", module) - .add("Unhandled", () => ( - - )) - .add("Handled", () => { - function render( - checked: boolean, - onChange: React.ChangeEventHandler - ): JSX.Element { - return ( - - ); - } - return {render}; - }) - .add("With slot label", () => { - const id: string = uniqueId(); - return ( - - - - ); - }) - .add("With label", () => { - const id: string = uniqueId(); - const label: (className: string) => React.ReactNode = ( - className: string - ): React.ReactNode => ( - - ); - return ; - }) - .add("Disabled", () => ( - - )); diff --git a/packages/react/fast-components-react-base/src/checkbox/checkbox.tsx b/packages/react/fast-components-react-base/src/checkbox/checkbox.tsx deleted file mode 100644 index 563c2223bac..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/checkbox.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { CheckboxClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import { get } from "lodash-es"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { - CheckboxHandledProps, - CheckboxProps, - CheckboxSlot, - CheckboxUnhandledProps, -} from "./checkbox.props"; - -/** - * Checkbox state interface - */ -export interface CheckboxState { - checked: boolean; -} - -class Checkbox extends Foundation< - CheckboxHandledProps, - CheckboxUnhandledProps, - CheckboxState -> { - public static displayName: string = `${DisplayNamePrefix}Checkbox`; - - public static defaultProps: Partial = { - managedClasses: {}, - }; - - /** - * React life-cycle method - */ - public static getDerivedStateFromProps( - nextProps: CheckboxProps, - prevState: CheckboxState - ): null | Partial { - if ( - typeof nextProps.checked === "boolean" && - nextProps.checked !== prevState.checked - ) { - return { - checked: nextProps.checked, - }; - } - - return null; - } - - /** - * Handled props instantiation - */ - protected handledProps: HandledProps = { - ariaLabel: void 0, - checked: void 0, - disabled: void 0, - inputId: void 0, - indeterminate: void 0, - label: void 0, - managedClasses: void 0, - name: void 0, - onChange: void 0, - value: void 0, - }; - - /** - * Provides reference to input - */ - private inputRef: React.RefObject; - - /** - * Define constructor - */ - constructor(props: CheckboxProps) { - super(props); - - this.state = { - checked: this.props.checked || false, - }; - - this.inputRef = React.createRef(); - } - - /** - * React life-cycle method - */ - public componentDidMount(): void { - this.applyIndeterminateState(); - } - - /** - * React life-cycle method - */ - public componentDidUpdate(): void { - this.applyIndeterminateState(); - } - - /** - * Renders the component - */ - public render(): React.ReactElement { - const { - checkbox_input, - checkbox_stateIndicator, - }: CheckboxClassNameContract = this.props.managedClasses; - - return ( -
    - - - {this.renderLabelBySlot()} - {this.renderLabel()} -
    - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - const { - checkbox, - checkbox__disabled, - checkbox__checked, - checkbox__indeterminate, - }: CheckboxClassNameContract = this.props.managedClasses; - - return super.generateClassNames( - classNames( - checkbox, - [checkbox__disabled, this.props.disabled], - [checkbox__checked, this.state.checked], - [checkbox__indeterminate, this.props.indeterminate] - ) - ); - } - - /** - * @deprecated - remove this method in next major version - * Render label if it exists - */ - private renderLabelBySlot(): Array> { - return React.Children.map( - this.withSlot(CheckboxSlot.label), - (label: React.ReactElement): React.ReactElement => { - let className: string | void = this.props.managedClasses.checkbox_label; - - if (typeof className !== "string") { - return label; - } - - const labelClassName: string | undefined = get(label, "props.className"); - - if (typeof labelClassName === "string") { - className = `${labelClassName} ${className}`; - } - - return React.cloneElement(label, { className }); - } - ); - } - - private renderLabel(): React.ReactNode { - const { checkbox_label }: CheckboxClassNameContract = this.props.managedClasses; - - if (typeof this.props.label === "function") { - return this.props.label(classNames(checkbox_label)); - } - } - - /** - * Apply indeterminate state to items that are indeterminate. - * This method should be called after render because it relies on element references. - */ - private applyIndeterminateState(): void { - if (this.props.indeterminate && this.inputRef.current) { - this.inputRef.current.indeterminate = this.props.indeterminate; - } - } - - /** - * Handles onChange as a controlled component - */ - private handleCheckboxChange = (e: React.ChangeEvent): void => { - if (typeof this.props.checked !== "boolean") { - this.setState({ checked: !this.state.checked }); - } - - if (typeof this.props.onChange === "function") { - this.props.onChange(e); - } - }; -} - -export default Checkbox; -export * from "./checkbox.props"; -export { CheckboxClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/checkbox/index.ts b/packages/react/fast-components-react-base/src/checkbox/index.ts deleted file mode 100644 index 3002512bd30..00000000000 --- a/packages/react/fast-components-react-base/src/checkbox/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Checkbox from "./checkbox"; -import checkboxSchema from "./checkbox.schema"; -import checkboxSchema2 from "./checkbox.schema.2"; - -export { checkboxSchema, checkboxSchema2 }; -export default Checkbox; -export * from "./checkbox"; diff --git a/packages/react/fast-components-react-base/src/context-menu-item/README.md b/packages/react/fast-components-react-base/src/context-menu-item/README.md deleted file mode 100644 index 6efed91b47c..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Context menu item -A menu item component designed to work as a child of the *context menu*. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.props.ts b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.props.ts deleted file mode 100644 index 044dca7cf5d..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.props.ts +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { - ContextMenuItemClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; -import { ContextMenuItemRole } from "./context-menu-item"; - -export type ContextMenuItemManagedClasses = ManagedClasses< - ContextMenuItemClassNameContract ->; -export type ContextMenuItemUnhandledProps = Omit< - React.HTMLAttributes, - "role" ->; -export interface ContextMenuItemHandledProps extends ContextMenuItemManagedClasses { - /** - * The children of the context menu item - */ - children?: React.ReactNode; - - /** - * The item's role - */ - role?: ContextMenuItemRole; - - /** - * If the menu item is disabled - */ - disabled?: boolean; - - /** - * Callback for when an item is invoked - * Returns the prop contract for the invoked context menu item - */ - onInvoke?: ( - e: React.MouseEvent | React.KeyboardEvent, - props: ContextMenuItemProps - ) => void; -} - -export type ContextMenuItemProps = ContextMenuItemHandledProps & - ContextMenuItemUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.2.ts b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.2.ts deleted file mode 100644 index e09416faf32..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.2.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Context menu item", - description: "A context menu item component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/context-menu-item", - formPluginId: "@microsoft/fast-components-react-base/context-menu-item", - properties: { - disabled: { - title: "Disabled", - type: "boolean", - }, - role: { - title: "HTML role attribute", - type: "string", - default: "menuitem", - enum: ["menuitem", "menuitemradio", "menuitemcheckbox"], - }, - children: { - ...linkedDataSchema, - formPluginId: - "@microsoft/fast-components-react-base/context-menu-item/children", - ids: ["metatext"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.ts b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.ts deleted file mode 100644 index 4dbff4bd0ce..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.schema.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Context menu item", - description: "A context menu item component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/context-menu-item", - formPluginId: "@microsoft/fast-components-react-base/context-menu-item", - properties: { - disabled: { - title: "Disabled", - type: "boolean", - }, - role: { - title: "HTML role attribute", - type: "string", - default: "menuitem", - enum: ["menuitem", "menuitemradio", "menuitemcheckbox"], - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: - "@microsoft/fast-components-react-base/context-menu-item/children", - ids: ["metatext"], - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.spec.tsx b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.spec.tsx deleted file mode 100644 index ee721753825..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.spec.tsx +++ /dev/null @@ -1,260 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow } from "enzyme"; -import { keyCodeEnter, keyCodeSpace } from "@microsoft/fast-web-utilities"; -import { DisplayNamePrefix } from "../utilities"; -import ContextMenuItem, { - ContextMenuItemHandledProps, - ContextMenuItemProps, - ContextMenuItemRole, - ContextMenuItemUnhandledProps, -} from "./context-menu-item"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("context menu item", (): void => { - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(ContextMenuItem as any).name}`).toBe( - ContextMenuItem.displayName - ); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should implement unhandledProps", (): void => { - const unhandledProps: ContextMenuItemUnhandledProps = { - "aria-label": "label", - }; - - const rendered: any = shallow(); - - expect(rendered.first().prop("aria-label")).toEqual("label"); - }); - - test("should apply a default role of 'menuitem'", (): void => { - const rendered: any = shallow(); - - expect(rendered.first().prop("role")).toEqual("menuitem"); - }); - - test("should apply a custom role when provided", (): void => { - const checkbox: any = shallow( - - ); - const radio: any = shallow( - - ); - - expect(checkbox.first().prop("role")).toEqual( - ContextMenuItemRole.menuItemCheckbox - ); - expect(radio.first().prop("role")).toEqual(ContextMenuItemRole.menuItemRadio); - }); - - test("should apply aria-disabled when disabled", (): void => { - const rendered: any = shallow(); - - expect(rendered.first().prop("aria-disabled")).toEqual(true); - }); - - test("should call a registered callback after a click event", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow(); - - rendered.simulate("click"); - - expect(onInvoke).toHaveBeenCalledTimes(1); - }); - - test("should call a registered callback after a click event", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow(); - - rendered.simulate("contextMenu", { preventDefault: jest.fn() }); - - expect(onInvoke).toHaveBeenCalledTimes(1); - }); - - test("should not call a registered callback after a click event because it is disabled", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow( - - ); - - rendered.simulate("click"); - - expect(onInvoke).toHaveBeenCalledTimes(0); - }); - - test("should call a registered callback after spacebar is pressed", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow(); - - rendered.simulate("keydown", { keyCode: keyCodeSpace }); - - expect(onInvoke).toHaveBeenCalledTimes(1); - }); - - test("should call a registered callback after enter key is pressed", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow(); - - rendered.simulate("keydown", { keyCode: keyCodeEnter }); - - expect(onInvoke).toHaveBeenCalledTimes(1); - }); - - test("should not call a registered callback after enter key is pressed because it is disabled", (): void => { - const onInvoke: any = jest.fn(); - const rendered: any = shallow( - - ); - - rendered.simulate("keydown", { keyCode: keyCodeEnter }); - - expect(onInvoke).toHaveBeenCalledTimes(0); - }); - - test("should ensure onClick and onKeyDown props are called when triggered", (): void => { - // These props are used internally, so we should test that handlers provided as props are still called - const onClick: any = jest.fn(); - const onKeyDown: any = jest.fn(); - - const rendered: any = shallow( - - ); - - rendered.simulate("keydown", { keyCode: keyCodeEnter }); - rendered.simulate("click"); - - expect(onClick).toBeCalledTimes(1); - expect(onKeyDown).toBeCalledTimes(1); - }); - - // parametrized contex-menu-item class name tests - [ - { - name: "should correctly assign className from input props", - contextMenuItemHandledProps: {} as ContextMenuItemHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled and root class name is empty", - contextMenuItemHandledProps: { - disabled: true, - } as ContextMenuItemHandledProps, - className: "", - expectedClassName: null, - }, - { - name: "should correctly assign className when is disabled", - contextMenuItemHandledProps: { - disabled: true, - } as ContextMenuItemHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: - "should correctly assign className when is disabled (name not present) and managed class given", - contextMenuItemHandledProps: { - disabled: true, - managedClasses: { - contextMenuItem: "context-menu-item-class", - }, - } as ContextMenuItemHandledProps, - className: "", - expectedClassName: "context-menu-item-class", - }, - { - name: - "should correctly assign className when is disabled (name present) and managed class given", - contextMenuItemHandledProps: { - disabled: true, - managedClasses: { - contextMenuItem: "context-menu-item-class", - contextMenuItem__disabled: "disabled", - }, - } as ContextMenuItemHandledProps, - className: "", - expectedClassName: "context-menu-item-class disabled", - }, - { - name: - "should correctly assign className when is disabled (name present), managed and root class name present", - contextMenuItemHandledProps: { - disabled: true, - managedClasses: { - contextMenuItem: "context-menu-item-name", - contextMenuItem__disabled: "disabled", - }, - } as ContextMenuItemHandledProps, - className: "root-name", - expectedClassName: "context-menu-item-name disabled root-name", - }, - { - name: - "should correctly assign className when is disabled (name present), managed, root class name present, role not", - contextMenuItemHandledProps: { - disabled: true, - role: ContextMenuItemRole.menuItemCheckbox, - managedClasses: { - contextMenuItem: "context-menu-item-name", - contextMenuItem__disabled: "disabled", - }, - } as ContextMenuItemHandledProps, - className: "root-name", - expectedClassName: "context-menu-item-name disabled root-name", - }, - { - name: - "should correctly assign className when is disabled (name present), managed, root class name present, role not", - contextMenuItemHandledProps: { - disabled: true, - role: ContextMenuItemRole.menuItemRadio, - managedClasses: { - contextMenuItem: "context-menu-item-name", - }, - } as ContextMenuItemHandledProps, - className: "root-name", - expectedClassName: "context-menu-item-name root-name", - }, - { - name: - "should correctly assign className when is disabled (name present), managed, root, role class name present", - contextMenuItemHandledProps: { - disabled: true, - role: ContextMenuItemRole.menuItemCheckbox, - managedClasses: { - contextMenuItem: "context-menu-item-name", - contextMenuItem__disabled: "disabled", - contextMenuItem__checkbox: "context-menu-item-checkbox", - }, - } as ContextMenuItemHandledProps, - className: "root-name", - expectedClassName: - "context-menu-item-name context-menu-item-checkbox disabled root-name", - }, - ].forEach( - ({ name, contextMenuItemHandledProps, className, expectedClassName }: any) => { - test(name, () => { - const props: ContextMenuItemProps = { ...contextMenuItemHandledProps }; - - const rendered: any = shallow( - - ); - - expect(rendered.prop("className")).toEqual(expectedClassName); - }); - } - ); -}); diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.stories.tsx b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.stories.tsx deleted file mode 100644 index affcf995b9a..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import ContextMenuItem from "./"; - -storiesOf("Context menu item", module) - .add("Default", () => Default menu item) - .add("Disabled", () => ( - Disabled menu item - )); diff --git a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.tsx b/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.tsx deleted file mode 100644 index 4f0027e1120..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/context-menu-item.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { ContextMenuItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames, keyCodeEnter, keyCodeSpace } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { - ContextMenuItemHandledProps, - ContextMenuItemProps, - ContextMenuItemUnhandledProps, -} from "./context-menu-item.props"; - -export enum ContextMenuItemRole { - menuItem = "menuitem", - menuItemRadio = "menuitemradio", - menuItemCheckbox = "menuitemcheckbox", -} - -class ContextMenuItem extends Foundation< - ContextMenuItemHandledProps, - ContextMenuItemUnhandledProps, - {} -> { - public static displayName: string = `${DisplayNamePrefix}ContextMenuItem`; - - public static defaultProps: Partial = { - role: ContextMenuItemRole.menuItem, - disabled: false, - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - disabled: void 0, - managedClasses: void 0, - onInvoke: void 0, - role: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( -
    - {this.props.children} -
    - ); - } - - /** - * Create class-names - */ - protected generateClassNames(): string { - const { - contextMenuItem, - contextMenuItem__checkbox, - contextMenuItem__radio, - contextMenuItem__disabled, - }: ContextMenuItemClassNameContract = this.props.managedClasses; - const role: ContextMenuItemRole = this.props.role; - - return super.generateClassNames( - classNames( - contextMenuItem, - [ - contextMenuItem__checkbox, - role === ContextMenuItemRole.menuItemCheckbox, - ], - [contextMenuItem__radio, role === ContextMenuItemRole.menuItemRadio], - [contextMenuItem__disabled, this.props.disabled] - ) - ); - } - - /** - * Handle the keydown event of the item - */ - private handleMenuItemKeyDown = (e: React.KeyboardEvent): void => { - switch (e.keyCode) { - case keyCodeEnter: - case keyCodeSpace: - this.handleInvoke(e); - break; - } - - if (typeof this.props.onKeyDown === "function") { - this.props.onKeyDown(e); - } - }; - - /** - * Handle the keydown event of the item - */ - private handleMenuItemClick = (e: React.MouseEvent): void => { - this.handleInvoke(e); - - if (typeof this.props.onClick === "function") { - this.props.onClick(e); - } - }; - - /** - * Handle the contextMenu event - */ - private handleContextMenu = (e: React.MouseEvent): void => { - e.preventDefault(); // Cancel browser context-menu because the user is clicking the context-menu-item - - this.handleInvoke(e); - - if (typeof this.props.onContextMenu === "function") { - this.props.onContextMenu(e); - } - }; - - /** - * Inform app-authors that the user has invoked the item - */ - private handleInvoke( - e: React.MouseEvent | React.KeyboardEvent - ): void { - if (typeof this.props.onInvoke === "function" && !this.props.disabled) { - this.props.onInvoke(e, this.props); - } - } -} - -export default ContextMenuItem; -export * from "./context-menu-item.props"; -export { ContextMenuItemClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/context-menu-item/index.ts b/packages/react/fast-components-react-base/src/context-menu-item/index.ts deleted file mode 100644 index f969b45798b..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu-item/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import ContextMenuItem from "./context-menu-item"; -import contextMenuItemSchema from "./context-menu-item.schema"; -import contextMenuItemSchema2 from "./context-menu-item.schema.2"; - -export { contextMenuItemSchema, contextMenuItemSchema2 }; -export default ContextMenuItem; -export * from "./context-menu-item"; diff --git a/packages/react/fast-components-react-base/src/context-menu/README.md b/packages/react/fast-components-react-base/src/context-menu/README.md deleted file mode 100644 index a2fc6356b2c..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/README.md +++ /dev/null @@ -1,8 +0,0 @@ -## Context menu -A generic menu component implementing the [menu](https://www.w3.org/TR/wai-aria-1.1/#menu) role and the keyboard navigation aligning to that role. The *context menu* will accept any child elements but is built to work with *context menu item* and *divider* components. - -### Usage -To accurately manage document focus, the *context menu* assumes that all rendered children are either an element with a role of `"menuitem"`, `"menuitemradio"`, `"menuitemcheckbox"`, or `"separator"` (an `hr` element is also acceptable). It also expects that these elements are passed as *direct* children. Wrapping all menu items inside of a `React.Fragment` (or some other single element) will throw off the internal focus tracking of the *context menu*. Additionally, the *context menu* expects that all menu item children implement the `tabIndex` property and apply that property to the underlying DOM. - -### Accessibility -The *context menu* considers a child element focusable when it has a role of `"menuitem"`, `"menuitemradio"`, or `"menuitemcheckbox"`, and will manage focus between these elements automatically. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.props.ts b/packages/react/fast-components-react-base/src/context-menu/context-menu.props.ts deleted file mode 100644 index 13af8d4d1bb..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.props.ts +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { - ContextMenuClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type ContextMenuManagedClasses = ManagedClasses; -export type ContextMenuUnhandledProps = React.HTMLAttributes; -export interface ContextMenuHandledProps extends ContextMenuManagedClasses { - /** - * The context menu children - */ - children?: React.ReactNode; - - /** - * When true, the context menu will immediately place focus on the appropriate menu-item when the context-menu mounts - */ - enableAutoFocus?: boolean; -} - -export type ContextMenuProps = ContextMenuHandledProps & ContextMenuUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.2.ts b/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.2.ts deleted file mode 100644 index a714b0164e7..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.2.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Context menu", - description: "A context menu component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/context-menu", - formPluginId: "@microsoft/fast-components-react-base/context-menu", - properties: { - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/context-menu/children", - ids: [ - "@microsoft/fast-components-react-base/context-menu-item", - "@microsoft/fast-components-react-base/divider", - ], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.ts b/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.ts deleted file mode 100644 index 14088e3a465..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.schema.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Context menu", - description: "A context menu component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/context-menu", - formPluginId: "@microsoft/fast-components-react-base/context-menu", - properties: {}, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/context-menu/children", - ids: [ - "@microsoft/fast-components-react-base/context-menu-item", - "@microsoft/fast-components-react-base/divider", - ], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.spec.tsx b/packages/react/fast-components-react-base/src/context-menu/context-menu.spec.tsx deleted file mode 100644 index 77c0e4b770a..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.spec.tsx +++ /dev/null @@ -1,253 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow, ShallowWrapper } from "enzyme"; -import { - keyCodeArrowDown, - keyCodeArrowRight, - keyCodeArrowUp, - keyCodeEnd, - keyCodeHome, -} from "@microsoft/fast-web-utilities"; -import { ContextMenuItemRole } from "../context-menu-item"; -import { DisplayNamePrefix } from "../utilities"; -import ContextMenu, { ContextMenuUnhandledProps } from "./context-menu"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("context menu", (): void => { - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(ContextMenu as any).name}`).toBe( - ContextMenu.displayName - ); - }); - - test("should have correct role attribute 'menu'", () => { - const rendered: ShallowWrapper = shallow(); - expect(rendered.first().prop("role")).toBe("menu"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should implement unhandledProps", (): void => { - const unhandledProps: ContextMenuUnhandledProps = { - "aria-label": "label", - }; - - const rendered: any = shallow(); - - expect(rendered.first().prop("aria-label")).toEqual("label"); - }); - - test("should not have a focusIndex if no children are focusable", (): void => { - const rendered: any = mount( - -
    hello world
    -     - ); - - expect(rendered.state("focusIndex")).toBe(-1); - }); - - test("should set focusIndex to the first focusable element on mount", (): void => { - const rendered: any = mount( - -
    not a focusable element
    -
    focusable element
    -     - ); - - expect(rendered.state("focusIndex")).toBe(1); - }); - - test("should move focus down when the down arrow is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -     - ); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowDown }); - - expect(rendered.state("focusIndex")).toBe(1); - }); - - test("should move focus down when the right arrow is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -     - ); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowRight }); - - expect(rendered.state("focusIndex")).toBe(1); - }); - - test("should move focus up when the up arrow is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -     - ); - - rendered.setState({ focusIndex: 1 }); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowUp }); - - expect(rendered.state("focusIndex")).toBe(0); - }); - - test("should move focus up when the left arrow is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -     - ); - - rendered.setState({ focusIndex: 1 }); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowUp }); - - expect(rendered.state("focusIndex")).toBe(0); - }); - - test("should move focus the last focusable element when the end key is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -
    three
    -
    four
    -     - ); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeEnd }); - - expect(rendered.state("focusIndex")).toBe(2); - }); - - test("should move focus the first focusable element when the home key is pressed", (): void => { - const rendered: any = mount( - -
    one
    -
    two
    -
    three
    -
    four
    -     - ); - - rendered.setState({ focusIndex: 3 }); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeHome }); - - expect(rendered.state("focusIndex")).toBe(1); - }); - - test("should place focus any child with the proper role", (): void => { - const children: React.ReactNode[] = Object.keys(ContextMenuItemRole).map( - (key: string): React.ReactNode => { - return ( -
    - {key} -
    - ); - } - ); - - const rendered: any = mount({children}); - - expect(rendered.state("focusIndex")).toBe(0); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(rendered.state("focusIndex")).toBe(1); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(rendered.state("focusIndex")).toBe(2); - }); - - test("should not place focus any child without a the proper role", (): void => { - const rendered: any = mount( - -
    -
    two
    -
    -
    three
    -
    -
    four
    -
    - - ); - - expect(rendered.state("focusIndex")).toBe(1); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(rendered.state("focusIndex")).toBe(3); - - rendered.childAt(0).simulate("keydown", { keyCode: keyCodeArrowDown }); - expect(rendered.state("focusIndex")).toBe(5); - }); - - test("should not call focus on mount when enableAutoFocus is false", (): void => { - const spy: jest.SpyInstance = jest.spyOn(ContextMenu.prototype, "focus" as any); - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: any = mount( - -
    two
    -
    three
    -
    four
    -     - ); - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const defaultRendered: any = mount( - -
    two
    -
    three
    -
    four
    -     - ); - - expect(spy).toHaveBeenCalledTimes(0); - }); - - test("should call focus on mount when enableAutoFocus is true", (): void => { - const spy: jest.SpyInstance = jest.spyOn(ContextMenu.prototype, "focus" as any); - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: any = mount( - -
    two
    -
    three
    -
    four
    -     - ); - - expect(spy).toHaveBeenCalledTimes(1); - }); - - test("Should accept a custom onKeyDown callback", (): void => { - const spy: jest.SpyInstance = jest.fn(); - const rendered: any = mount( - -
    One
    -
    two
    -
    three
    -
    four
    -     - ); - rendered.simulate("keydown", {}); - expect(spy).toHaveBeenCalledTimes(1); - }); -}); diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.stories.tsx b/packages/react/fast-components-react-base/src/context-menu/context-menu.stories.tsx deleted file mode 100644 index 863e6b2d006..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import ContextMenuItem from "../context-menu-item"; -import Divider from "../divider"; -import ContextMenu from "./"; - -storiesOf("Context menu", module) - .add("Default", () => ( - - Menu item 1 - Menu item 2 - Menu item 3 - - )) - .add("With autofocus", () => ( - - Menu item 1 - Menu item 2 - Menu item 3 - - )) - .add("With divider", () => ( - - Menu item 1 - Menu item 2 - - Menu item 3 - - )); diff --git a/packages/react/fast-components-react-base/src/context-menu/context-menu.tsx b/packages/react/fast-components-react-base/src/context-menu/context-menu.tsx deleted file mode 100644 index 010480d1882..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/context-menu.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import { ContextMenuClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { - classNames, - keyCodeArrowDown, - keyCodeArrowLeft, - keyCodeArrowRight, - keyCodeArrowUp, - keyCodeEnd, - keyCodeHome, -} from "@microsoft/fast-web-utilities"; -import { canUseDOM } from "exenv-es6"; -import { inRange, invert } from "lodash-es"; -import React from "react"; -import { ContextMenuItemProps, ContextMenuItemRole } from "../context-menu-item"; -import { DisplayNamePrefix } from "../utilities"; -import { - ContextMenuHandledProps, - ContextMenuProps, - ContextMenuUnhandledProps, -} from "./context-menu.props"; - -export interface ContextMenuState { - /** - * The index of the focusable child - */ - focusIndex: number; -} - -class ContextMenu extends Foundation< - ContextMenuHandledProps, - ContextMenuUnhandledProps, - ContextMenuState -> { - public static displayName: string = `${DisplayNamePrefix}ContextMenu`; - public static defaultProps: Partial = { - managedClasses: {}, - }; - - private static focusableElementRoles: { [key: string]: string } = invert( - ContextMenuItemRole - ); - - protected handledProps: HandledProps = { - children: void 0, - managedClasses: void 0, - enableAutoFocus: void 0, - }; - - private rootElement: React.RefObject = React.createRef< - HTMLDivElement - >(); - - constructor(props: ContextMenuProps) { - super(props); - - this.state = { - focusIndex: -1, - }; - } - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( -
    - {this.renderChildren()} -
    - ); - } - - public componentDidMount(): void { - const children: Element[] = this.domChildren(); - const focusIndex: number = children.findIndex(this.isFocusableElement); - - if (focusIndex !== -1) { - this.setState({ - focusIndex, - }); - } - - if (this.props.enableAutoFocus) { - this.focus(); - } - } - - /** - * Brings focus to the appropriate menu-item - */ - public focus(): void { - this.setFocus(this.state.focusIndex === -1 ? 0 : this.state.focusIndex, 1); - } - - /** - * Create class names - */ - protected generateClassNames(): string { - return super.generateClassNames( - classNames(this.props.managedClasses.contextMenu) - ); - } - - /** - * Render all child elements - */ - private renderChildren(): React.ReactChild[] { - return React.Children.map(this.props.children, this.renderChild); - } - - /** - * Render a single child - */ - private renderChild = ( - child: React.ReactElement, - index: number - ): React.ReactChild => { - return React.cloneElement(child, { - tabIndex: index === this.state.focusIndex ? 0 : -1, - onFocus: this.handleMenuItemFocus, - }); - }; - - private isMenuItemElement(element: Element): element is HTMLElement { - return ( - element instanceof HTMLElement && - ContextMenu.focusableElementRoles.hasOwnProperty(element.getAttribute("role")) - ); - } - - /** - * Determines if a given element should be focusable by the menu - */ - private isFocusableElement = (element: Element): element is HTMLElement => { - return this.isMenuItemElement(element) && !this.isDisabledElement(element); - }; - - private isDisabledElement = (element: Element): element is HTMLElement => { - return ( - this.isMenuItemElement(element) && - element.getAttribute("aria-disabled") === "true" - ); - }; - - /** - * Return an array of all focusabled elements that are children - * of the context menu - */ - private domChildren(): Element[] { - return canUseDOM() && this.rootElement.current instanceof HTMLElement - ? Array.from(this.rootElement.current.children) - : []; - } - - /** - * Ensure we always validate our internal state on item focus events, otherwise - * the component can get out of sync from click events - */ - private handleMenuItemFocus = (e: React.FocusEvent): void => { - const target: Element = e.currentTarget; - const focusIndex: number = this.domChildren().indexOf(target); - - if (this.isDisabledElement(target)) { - target.blur(); - - return; - } - - if (focusIndex !== this.state.focusIndex && focusIndex !== -1) { - this.setFocus(focusIndex, focusIndex > this.state.focusIndex ? 1 : -1); - } - }; - - /** - * Sets focus to the nearest focusable element to the supplied focusIndex. - * The adjustment controls how the function searches for other focusable elements - * if the element at the focusIndex is not focusable. A positive number will search - * towards the end of the children array, whereas a negative number will search towards - * the beginning of the children array. - */ - private setFocus(focusIndex: number, adjustment: number): void { - const children: Element[] = this.domChildren(); - - while (inRange(focusIndex, children.length)) { - const child: Element = children[focusIndex]; - - if (this.isFocusableElement(child)) { - child.focus(); - - this.setState({ - focusIndex, - }); - - break; - } - - focusIndex += adjustment; - } - } - - /** - * Handle the keydown event of the root menu - */ - private handleMenuKeyDown = (e: React.KeyboardEvent): void => { - switch (e.keyCode) { - case keyCodeArrowDown: - case keyCodeArrowRight: - e.preventDefault(); - this.setFocus(this.state.focusIndex + 1, 1); - - break; - - case keyCodeArrowUp: - case keyCodeArrowLeft: - e.preventDefault(); - this.setFocus(this.state.focusIndex - 1, -1); - - break; - - case keyCodeEnd: - e.preventDefault(); - this.setFocus(this.domChildren().length - 1, -1); - - break; - - case keyCodeHome: - e.preventDefault(); - this.setFocus(0, 1); - - break; - } - - if (typeof this.props.onKeyDown === "function") { - this.props.onKeyDown(e); - } - }; - - private handleContextMenu = (e: React.MouseEvent): void => { - e.preventDefault(); // prevent browser context-menu becuase this *is* a context menu - - if (typeof this.props.onContextMenu === "function") { - this.props.onContextMenu(e); - } - }; -} - -export default ContextMenu; -export * from "./context-menu.props"; -export { ContextMenuClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/context-menu/index.ts b/packages/react/fast-components-react-base/src/context-menu/index.ts deleted file mode 100644 index 0269e7b9ad6..00000000000 --- a/packages/react/fast-components-react-base/src/context-menu/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import ContextMenu from "./context-menu"; -import contextMenuSchema from "./context-menu.schema"; -import contextMenuSchema2 from "./context-menu.schema.2"; - -export { contextMenuSchema, contextMenuSchema2 }; -export default ContextMenu; -export * from "./context-menu"; diff --git a/packages/react/fast-components-react-base/src/data-grid/README.md b/packages/react/fast-components-react-base/src/data-grid/README.md deleted file mode 100644 index f0b04c501df..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/README.md +++ /dev/null @@ -1,65 +0,0 @@ -# Data grid -The *data grid* component enables a display of tabular data in a scrolling grid with fixed column headers. - -## Usage - -Authors provide the data the component will display through the `rows` prop. This data must take the form of an array of objects, each object in the array corresponds to one row of data in the grid. Additionally, each object in the array must have a property which uniquely identifies it that is passed to the component through the `dataRowKey` prop. - -A simple data set using a "clientId" attribute as a unique identifier could look like this. - -```ts -myData = [ - {clientId: a1, name: Bob, age: 50}, - {clientId: a2, name: Doug, age: 51}, - etc... -] -``` - -What data is displayed in each row is controlled by the component's `columns` prop which consists of an array of `column` objects - one for each column of data to be displayed. A `column` requires authors to specify a `columnDataKey` which identifies the particular field in the datarow to be displayed in the column, a `title` which describes what goes in the fixed column header cell, and a `columnWidth` which is string that sets the width of the column as for a css grid column (i.e. "50px", "1fr", "20%", etc...). The order in which columns appear is determined by the order of the `columns` in the array. If `columns` are not provided the component will infer uniform width columns from the properties in the row data. - -In order to display the simple data set described previously the `columns` could look like this: - -```ts -myColumns: DataGridColumn[] = [ - { - columnDataKey: "clientId", - title: "Client #", - columnWidth: "120px", - }, - { - columnDataKey: "name", - title: "Name", - columnWidth: "auto", - }, - { - columnDataKey: "age", - title: "Age", - columnWidth: "1fr", - }, -]; -``` - -And the markup for the simple data grid to display the above: - -```ts - -``` - -### Virtualized content - -*Data grid* rendering performance is enhanced because it does not render all of the data to the DOM all the time, but rather limits what is rendered to those items that are near the visible area of the grid. - -There are two mechanisms that govern this in the component: - -- limiting how many data rows are converted to React Nodes and passed to the underlying display panel. Only one "page" worth of data is passed to the display panel at one time and is centered on the data currently in view. When the user scrolls near the end of a page a new page of data centered on the current scroll position is generated. How many items get passed to the display panel is controlled by the grid's `pageSize` prop. A page size greater than the number of items in the dataset ensures all items are passed to the display at all times if that is desired. - -- the underlying panel also virtualizes nodes that are not currently in view - -Both of these features are controlled by the `virtualize` prop of the *data grid* component. When virtualization is turned off all rows are rendered to the dom and are sized by html/css. - -## Accessibility -*Data grid* implements the recommended keyboard navigation scheme described [here](https://www.w3.org/TR/wai-aria-practices/#grid) \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.props.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.props.ts deleted file mode 100644 index a937391b5d4..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.props.ts +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import { - DataGridCellClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; -import { DataGridColumn } from "./data-grid.props"; - -export type DataGridCellManagedClasses = ManagedClasses; -export type DataGridCellUnhandledProps = React.AllHTMLAttributes; - -export interface DataGridCellHandledProps extends DataGridCellManagedClasses { - /** - * Data for this row - */ - rowData: object; - - /** - * Column definition for this row - */ - column: DataGridColumn; - - /** - * The column index - */ - columnIndex: number; -} - -export type DataGridCellProps = DataGridCellHandledProps & DataGridCellUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.schema.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.schema.ts deleted file mode 100644 index 60f02f46d5a..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.schema.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Data grid cell", - description: "A data grid cell's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/data-grid-cell", - formPluginId: "@microsoft/fast-components-react-base/data-grid-cell", - properties: { - rowData: { - title: "Row data", - type: "object", - }, - columnIndex: { - title: "Column index", - type: "number", - }, - column: { - title: "Column", - type: "object", - properties: { - columnDataKey: { - title: "Column data key", - type: "string", - }, - title: { - title: "Title", - type: "object", - }, - columnWidth: { - title: "Column Width", - type: "string", - }, - }, - }, - }, - required: ["rowData", "columnIndex", "column"], -}; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.spec.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.spec.tsx deleted file mode 100644 index d1086346b7f..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.spec.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { DataGridCellClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { merge } from "lodash-es"; -import { keyCodeArrowDown } from "@microsoft/fast-web-utilities"; -import { configure, mount, ReactWrapper } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import DataGridCell from "./data-grid-cell"; -import { DataGridContext } from "./data-grid-context"; -import { DataGridColumn, DataGridProps } from "./data-grid.props"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("data grid cell", (): void => { - const managedClasses: DataGridCellClassNameContract = { - dataGridCell: "dataGridCell", - }; - - const rowData1: object = { - name: "Thomas", - age: 25, - }; - - const rowData2: object = { - name: "Richard", - age: 26, - }; - - const rowData3: object = { - name: "Harold", - age: 27, - }; - - const column1: DataGridColumn = { - columnDataKey: "name", - title: "Name", - columnWidth: "200px", - }; - - const column2: DataGridColumn = { - columnDataKey: "age", - title: "Age", - columnWidth: "200px", - }; - - const gridProps: DataGridProps = { - dataRowKey: "name", - rows: [rowData1, rowData2, rowData3], - columns: [column1, column2], - rowHeight: 60, - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(DataGridCell as any).name}`).toBe( - DataGridCell.displayName - ); - }); - - test("cellId, role and base class gets written to dom element", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const cell: any = rendered.children(); - expect(cell.prop("data-cellid")).toEqual("name"); - expect(cell.prop("role")).toEqual("gridcell"); - expect(cell.prop("className")).toContain(managedClasses.dataGridCell); - }); - - test("tab index is 0 when context indicates cell has default focus", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const cell: any = rendered.children(); - expect(cell.prop("tabIndex")).toEqual(0); - }); - - test("tab index is -1 when context indicates cell does not have default focus", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const cell: any = rendered.children(); - expect(cell.prop("tabIndex")).toEqual(-1); - }); - - test("onCellKeyDown callback is called on keydown", (): void => { - const onCellKeyDown: any = jest.fn(); - - const rendered: ReactWrapper = mount( - - - - ); - - expect(onCellKeyDown).toHaveBeenCalledTimes(0); - const cell: any = rendered.children(); - cell.simulate("keyDown", { keyCode: keyCodeArrowDown }); - expect(onCellKeyDown).toHaveBeenCalledTimes(1); - }); - - test("onFocus callback is called on on focus", (): void => { - const onCellFocused: any = jest.fn(); - - const rendered: ReactWrapper = mount( - - - - ); - - expect(onCellFocused).toHaveBeenCalledTimes(0); - const cell: any = rendered.children(); - cell.simulate("focus"); - expect(onCellFocused).toHaveBeenCalledTimes(1); - }); - - test("Custom cell render function is called", (): void => { - const cellRenderFunction: any = jest.fn(); - cellRenderFunction.mockReturnValue("Test"); - const updatedColumns: DataGridColumn = merge({}, column1, { - cell: cellRenderFunction, - }); - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: ReactWrapper = mount( - - - - ); - - expect(cellRenderFunction).toHaveBeenCalledTimes(1); - }); -}); diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.tsx deleted file mode 100644 index ffddf6d29a9..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-cell.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React from "react"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { isNil } from "lodash-es"; -import { classNames } from "@microsoft/fast-web-utilities"; -import { extractHtmlElement } from "@microsoft/fast-react-utilities"; -import { DataGridCellClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { DisplayNamePrefix } from "../utilities"; -import { - DataGridCellHandledProps, - DataGridCellProps, - DataGridCellUnhandledProps, -} from "./data-grid-cell.props"; -import { DataGridContext, DataGridContextType } from "./data-grid-context"; -import { DataGridCellRenderConfig } from "./data-grid.props"; - -class DataGridCell extends Foundation< - DataGridCellHandledProps, - DataGridCellUnhandledProps, - {} -> { - public static defaultProps: Partial = { - rowData: null, - column: null, - columnIndex: 0, - managedClasses: {}, - }; - - public static displayName: string = `${DisplayNamePrefix}DataGridCell`; - public static contextType: React.Context = DataGridContext; - - /** - * The default function that renders a cell - */ - public static renderCell = (config: DataGridCellRenderConfig): React.ReactNode => { - return ( -
    - {config.rowData[config.columnDataKey]} -
    - ); - }; - - protected handledProps: HandledProps = { - managedClasses: void 0, - rowData: void 0, - column: void 0, - columnIndex: void 0, - }; - - private focusTarget: React.RefObject = React.createRef(); - private rootElement: React.RefObject = React.createRef(); - - /** - * Renders the component - */ - public render(): React.ReactNode { - if (isNil(this.context) || isNil(this.props.column)) { - return null; - } - - const unhandledProps: React.HTMLAttributes = { - role: "gridcell", - tabIndex: this.isFocusCell() ? 0 : -1, - onKeyDown: this.handleKeyDown, - onFocus: this.handleFocus, - }; - - const config: DataGridCellRenderConfig = { - rowData: this.props.rowData, - columnDataKey: this.props.column.columnDataKey, - columnIndex: this.props.columnIndex, - classNames: this.generateClassNames(), - rootElement: this.rootElement, - focusTarget: this.focusTarget, - unhandledProps: unhandledProps, - }; - - return !isNil(this.props.column.cell) - ? this.props.column.cell(config) - : DataGridCell.renderCell(config); - } - - /** - * React life-cycle method - */ - public componentDidMount(): void { - if (this.isDesiredFocusCell() && !isNil(this.rootElement.current)) { - this.rootElement.current.focus(); - } - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames( - classNames(this.props.managedClasses.dataGridCell) - ); - } - - /** - * returns true if this is the datagrid's current focus cell - */ - private isDesiredFocusCell = (): boolean => { - if (this.context === null) { - return false; - } - return ( - this.props.rowData[this.context.dataRowKey] === - this.context.desiredFocusRowKey && - this.props.column.columnDataKey === this.context.desiredFocusColumnKey - ); - }; - - /** - * returns true if this is the datagrid's current focus cell - */ - private isFocusCell = (): boolean => { - if (this.context === null) { - return false; - } - return ( - this.props.rowData[this.context.dataRowKey] === this.context.focusRowKey && - this.props.column.columnDataKey === this.context.focusColumnKey - ); - }; - - /** - * Handle the keydown event of the item - */ - private handleKeyDown = (e: React.KeyboardEvent): void => { - this.context.onCellKeyDown(this.props, e); - }; - - /** - * Handle focus event - */ - private handleFocus = (e: React.FocusEvent): void => { - const focusTargetElement: HTMLElement | Text = extractHtmlElement( - this.focusTarget - ); - if (focusTargetElement !== null && focusTargetElement instanceof HTMLElement) { - focusTargetElement.focus(); - } - this.context.onCellFocused(this.props, e); - }; -} - -DataGridCell.contextType = DataGridContext; -export default DataGridCell; -export * from "./data-grid-cell.props"; -export { DataGridCellClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-context.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid-context.tsx deleted file mode 100644 index 743db1e694f..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-context.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { ReactText } from "react"; -import { DataGridCellProps } from "./data-grid-cell.props"; -import { DataGridColumn } from "./data-grid.props"; - -export interface DataGridContextType { - onCellFocused: ( - itemFocused: DataGridCellProps, - event: React.FocusEvent - ) => void; - onCellKeyDown: ( - itemFocused: DataGridCellProps, - event: React.KeyboardEvent - ) => void; - focusRowKey: ReactText | null; - focusColumnKey: ReactText | null; - desiredVisibleRowIndex: number | null; - desiredFocusRowKey: ReactText | null; - desiredFocusColumnKey: ReactText | null; - columns: DataGridColumn[] | null; - dataRowKey: ReactText | null; -} - -export const DataGridContext: React.Context = React.createContext< - DataGridContextType ->({ - onCellFocused: null, - onCellKeyDown: null, - focusRowKey: null, - focusColumnKey: null, - desiredVisibleRowIndex: null, - desiredFocusRowKey: null, - desiredFocusColumnKey: null, - columns: null, - dataRowKey: null, -}); diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.props.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid-row.props.ts deleted file mode 100644 index 918dc90b030..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.props.ts +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { - DataGridRowClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export const RowIdKey: string = "data-rowid"; - -export type DataGridRowManagedClasses = ManagedClasses; -export type DataGridRowUnhandledProps = React.HTMLAttributes; - -export interface DataGridRowHandledProps extends DataGridRowManagedClasses { - /** - * The base data for this row - */ - rowData: object; - - /** - * String that gets applied to the the css gridTemplateColumns attribute for the row - */ - gridTemplateColumns: string; - - /** - * The row's index in the parent data grid - */ - rowIndex: number; -} - -export type DataGridRowProps = DataGridRowHandledProps & DataGridRowUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.schema.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid-row.schema.ts deleted file mode 100644 index 175a02be671..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.schema.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Data grid row", - description: "A data grid row's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/data-grid-row", - formPluginId: "@microsoft/fast-components-react-base/data-grid-row", - properties: { - rowData: { - title: "Row data", - type: "object", - }, - gridTemplateColumns: { - title: "Grid template columns", - type: "string", - }, - rowIndex: { - title: "Row index", - type: "number", - }, - }, - required: ["rowData", "gridTemplateColumns", "rowIndex"], -}; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.spec.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid-row.spec.tsx deleted file mode 100644 index 0ef12920acb..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.spec.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, ReactWrapper } from "enzyme"; -import { DataGridRowClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { DisplayNamePrefix } from "../utilities"; -import DataGridRow from "./data-grid-row"; -import { DataGridContext } from "./data-grid-context"; -import { DataGridColumn } from "./data-grid.props"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("data grid row", (): void => { - const managedClasses: DataGridRowClassNameContract = { - dataGridRow: "dataGridRow", - dataGridRow__focusedWithin: "dataGridRow__focusWithin", - }; - - const rowData1: object = { - name: "Thomas", - age: 25, - }; - - const column1: DataGridColumn = { - columnDataKey: "name", - title: "Name", - columnWidth: "200px", - }; - - const column2: DataGridColumn = { - columnDataKey: "age", - title: "Age", - columnWidth: "200px", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(DataGridRow as any).name}`).toBe( - DataGridRow.displayName - ); - }); - - test("rowId, role and base class gets written to dom element", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const row: any = rendered.children(); - expect(row.prop("data-rowid")).toEqual("Thomas"); - expect(row.prop("role")).toEqual("row"); - expect(row.prop("className")).toContain(managedClasses.dataGridRow); - }); - - test("focus within class applied when focus is whithin the row", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const row: any = rendered.children(); - expect(row.prop("className")).toContain( - managedClasses.dataGridRow__focusedWithin - ); - }); - - test("cells are rendered as children", (): void => { - const rendered: ReactWrapper = mount( - - - - ); - - const row: any = rendered.children(); - expect(row.find("BaseDataGridCell").length).toBe(2); - }); -}); diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid-row.tsx deleted file mode 100644 index 9ecdd5c3b52..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid-row.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React from "react"; -import { get, isNil } from "lodash-es"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import { DataGridRowClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { DisplayNamePrefix } from "../utilities"; -import { - DataGridRowHandledProps, - DataGridRowProps, - DataGridRowUnhandledProps, -} from "./data-grid-row.props"; -import { DataGridColumn } from "./data-grid.props"; -import DataGridCell from "./data-grid-cell"; -import { DataGridContext, DataGridContextType } from "./data-grid-context"; - -class DataGridRow extends Foundation< - DataGridRowHandledProps, - DataGridRowUnhandledProps, - {} -> { - public static defaultProps: Partial = { - managedClasses: {}, - }; - - public static displayName: string = `${DisplayNamePrefix}DataGridRow`; - - public static contextType: React.Context = DataGridContext; - - protected handledProps: HandledProps = { - rowData: void 0, - gridTemplateColumns: void 0, - rowIndex: void 0, - managedClasses: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactNode { - if (isNil(this.context)) { - return null; - } - - const rowKey: React.ReactText = !isNil( - this.props.rowData[this.context.dataRowKey] - ) - ? this.props.rowData[this.context.dataRowKey] - : this.props.rowIndex; - - // Check if there is already a style object being passed as props - const styleProps: React.CSSProperties = get(this.props, "style"); - - return ( -
    - {this.renderCells()} -
    - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - const { - dataGridRow, - dataGridRow__focusedWithin, - }: DataGridRowClassNameContract = this.props.managedClasses; - - return super.generateClassNames( - classNames(dataGridRow, [ - dataGridRow__focusedWithin, - this.props.rowData[this.context.dataRowKey] === this.context.focusRowKey, - ]) - ); - } - - /** - * render all cells - */ - private renderCells(): React.ReactNode[] { - if (this.context === null || this.context.columns === null) { - return; - } - return this.context.columns.map(this.renderCell); - } - - /** - * renders a cell - */ - private renderCell = (column: DataGridColumn, index: number): React.ReactNode => { - return ( - - ); - }; -} - -DataGridRow.contextType = DataGridContext; -export default DataGridRow; -export * from "./data-grid-row.props"; -export { DataGridRowClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid.props.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid.props.ts deleted file mode 100644 index 6dc680d24e4..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid.props.ts +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; -import { - DataGridClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type DataGridManagedClasses = ManagedClasses; -export type DataGridUnhandledProps = React.HTMLAttributes; - -export interface DataGridCellRenderConfig { - rowData: object; - columnDataKey: React.ReactText; - columnIndex: number; - classNames: string; - rootElement: React.RefObject; - focusTarget: React.RefObject; - unhandledProps: object; -} - -export interface DataGridHeaderRenderConfig { - title: React.ReactNode; - key: React.ReactText; - columnIndex: number; - classNames: string; -} - -export interface DataGridRowHeightCallbackParams { - rowData: object; - rowIndex: number; - defaultRowHeight: number; -} - -export interface DataGridColumn { - /** - * identifies the data item to be displayed in this column - * (i.e. how the data item is labelled in each row) - */ - columnDataKey: React.ReactText; - - /** - * Column title, if not provided columnDataKey is used as title - */ - title?: React.ReactNode; - - /** - * The width of the column in a form compatible with css grid column widths - * (i.e. "50px", "1fr", "20%", etc...), defaults to "1fr" - */ - columnWidth?: string; - - /** - * Custom render function for the header cell of the column - */ - header?: (config: DataGridHeaderRenderConfig) => React.ReactNode; - - /** - * Custom render function for a data cells in the column - */ - cell?: (config: DataGridCellRenderConfig) => React.ReactNode; -} - -export interface DataGridHandledProps extends DataGridManagedClasses { - /** - * Data to be displayed in the grid - * An array of data items for each row is expected - */ - rows: object[]; - - /** - * the field which uniquely identifies each data row - */ - dataRowKey: React.ReactText; - - /** - * Array of column definitions specify how to display each column - */ - columns?: DataGridColumn[]; - - /** - * Default focus row key - * This row will be in view when the grid loads. - * Changing this prop during the component lifetime - * to a non-null value will also move the new row into view. - */ - defaultFocusRowKey?: React.ReactText; - - /** - * Default focus column key - */ - defaultFocusColumnKey?: React.ReactText; - - /** - * When true some out of view rows are not rendered to the DOM to increase performance, - * default is false - */ - virtualize?: boolean; - - /** - * The default height in pixels of each row - * This setting only applies when virtualizationItems is true. - */ - rowHeight?: number; - - /** - * Data page size in number of rows. - * This setting only applies when virtualizationItems is true. - * This is the maximum number of items that will be converted to data row items passed to the - * underlying panel display at any one time. - * default is 1000 - */ - pageSize?: number; - - /** - * This callback function overrides the rowHeight prop and will be called for each - * This setting only applies when virtualizationItems is true. - * row of data when the rows are updated in props. Allows for non-uniform row heights. - */ - rowHeightCallback?: (row: DataGridRowHeightCallbackParams) => number; - - /** - * If props have been updated this is the end index of the range of data items, starting at index 0, that are guaranteed not to - * require recalculating size since the last prop update. This is an optimization for large data sets. - * This setting only applies when virtualizationItems is true. - * ie. if changes resize the item at index 10, the stable range end should be 9 - * default is 0 - */ - stableRangeEndIndex?: number; -} - -export type DataGridProps = DataGridHandledProps & DataGridUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid.schema.ts b/packages/react/fast-components-react-base/src/data-grid/data-grid.schema.ts deleted file mode 100644 index cba33da6522..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid.schema.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Data grid", - description: "A data grid component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/data-grid", - formPluginId: "@microsoft/fast-components-react-base/data-grid", - properties: { - rows: { - title: "Array of data (objects by row) to be rendered", - type: "array", - items: { - title: "Row data", - type: "object", - }, - }, - stableRangeEndIndex: { - title: "Stable range end index", - type: "number", - }, - pageSize: { - title: "Data page size", - type: "number", - }, - virtualize: { - title: "Virtualize", - type: "boolean", - }, - dataRowKey: { - title: "Data row key", - type: "string", - }, - columns: { - title: "Array of columns", - type: "array", - }, - rowHeight: { - title: "Item height", - type: "number", - }, - defaultFocusRowKey: { - title: "Default focus row key", - type: "string", - }, - defaultFocusColumnKey: { - title: "Default focus column key", - type: "string", - }, - }, - required: ["rows", "dataRowKey"], -}; diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid.spec.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid.spec.tsx deleted file mode 100644 index 2d0cfaf4bf1..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid.spec.tsx +++ /dev/null @@ -1,726 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, ReactWrapper } from "enzyme"; -import { DataGridClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { - keyCodeArrowDown, - keyCodeArrowLeft, - keyCodeArrowRight, - keyCodeArrowUp, - keyCodePageDown, - keyCodePageUp, -} from "@microsoft/fast-web-utilities"; -import { DisplayNamePrefix } from "../utilities"; -import DataGrid, { DataGridState } from "./data-grid"; -import { DataGridCellRenderConfig, DataGridColumn } from "./data-grid.props"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("data grid", (): void => { - interface TestRowData { - name: string; - age: number; - } - - function renderCellWithButton(config: DataGridCellRenderConfig): React.ReactNode { - return ( -
    - -
    - ); - } - - const managedClasses: DataGridClassNameContract = { - dataGrid: "dataGrid", - dataGrid__virtualized: "dataGrid__virtualized", - dataGrid_scrollingPanel: "dataGrid_scrollingPanel", - dataGrid_scrollingPanelItems: "dataGrid_scrollingPanelItems", - dataGrid_scrollingPanel__scrollable: "dataGrid_scrollingPanel__scrollable", - dataGrid_header: "dataGrid_header", - dataGrid_columnHeader: "dataGrid_columnHeader", - dataGrid_row: "dataGrid_viewport", - dataGrid_row__focusedWithin: "dataGrid_row__focusedWithin", - dataGrid_cell: "dataGrid_cell", - }; - - const rowData1: TestRowData = { - name: "Thomas", - age: 25, - }; - - const rowData2: TestRowData = { - name: "Richard", - age: 26, - }; - - const rowData3: TestRowData = { - name: "Harold", - age: 27, - }; - - function getDataSet(length: number): object[] { - const dataSet: object[] = []; - - for (let i: number = 0; i < length; i++) { - dataSet.push({ - name: `id-${i}`, - age: i, - }); - } - - return dataSet; - } - - const column1: DataGridColumn = { - columnDataKey: "name", - title: "Name", - columnWidth: "200px", - }; - - const column2: DataGridColumn = { - columnDataKey: "age", - title: "Age", - columnWidth: "200px", - }; - - const columnCustomCell: DataGridColumn = { - columnDataKey: "age", - title: "Age", - columnWidth: "200px", - cell: renderCellWithButton, - }; - - const rows: TestRowData[] = [rowData1, rowData2, rowData3]; - - const rowsShortened: TestRowData[] = [rowData1, rowData2]; - - const columns: DataGridColumn[] = [column1, column2]; - - const columnsCustomCell: DataGridColumn[] = [column1, columnCustomCell]; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(DataGrid as any).name}`).toBe( - DataGrid.displayName - ); - }); - - test("role and base class set correctly", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.children().prop("className")).toContain(managedClasses.dataGrid); - expect(rendered.children().prop("role")).toEqual("grid"); - }); - - test("virtualized classname not applied when in not virtualized mode", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.children().prop("className")).not.toContain( - managedClasses.dataGrid__virtualized - ); - }); - - test("virtualized classname applied when in virtualized mode", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.children().prop("className")).toContain( - managedClasses.dataGrid__virtualized - ); - }); - - test("data grid header exists and has two column header cells", (): void => { - const rendered: ReactWrapper = mount( - - ); - - const header: any = rendered.find('[className="dataGrid_header"]'); - expect(header.length).toBe(1); - expect(header.prop("role")).toEqual("row"); - const columnHeaders: any = header.find('[role="columnheader"]'); - expect(columnHeaders.length).toBe(2); - }); - - test("scrolling panel element exists", (): void => { - const rendered: ReactWrapper = mount( - - ); - - const matches: any = rendered.find( - '[className="dataGrid_scrollingPanel dataGrid_scrollingPanel__scrollable"]' - ); - expect(matches.length).toBe(1); - }); - - test("scrolling panel items container element exists", (): void => { - const rendered: ReactWrapper = mount( - - ); - - const matches: any = rendered.find('[className="dataGrid_scrollingPanelItems"]'); - expect(matches.length).toBe(1); - }); - - test("getColumnIndexByKey returns correct value", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.instance()["getColumnIndexByKey"]("age", columns)).toBe(1); - }); - - test("getRowIndexByKey returns correct value", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.instance()["getRowIndexByKey"]("Richard")).toBe(1); - }); - - test("virtualize items reduces number or rendered items", (): void => { - let container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - let rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - expect(rendered.find("[data-rowid]").length).toBe(20); - document.body.removeChild(container); - - container = document.createElement("div"); - document.body.appendChild(container); - rendered = mount( - , - { - attachTo: container, - } - ); - - expect(rendered.find("[data-rowid]").length).toBe(1); - document.body.removeChild(container); - }); - - test("arrow keys move focus around the grid", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - const row: any = rendered.find("[data-rowid]").first(); - const cell: any = row.find("[data-cellid]").first(); - - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("name"); - - cell.simulate("keydown", { keyCode: keyCodeArrowRight }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("age"); - - cell.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Richard"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("age"); - - cell.simulate("keydown", { keyCode: keyCodeArrowUp }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("age"); - - cell.simulate("keydown", { keyCode: keyCodeArrowLeft }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("name"); - - document.body.removeChild(container); - }); - - test("page up/down keys move up/down in the grid", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - , - { - attachTo: container, - } - ); - - rendered.instance().lastReportedViewportSpan = 200; - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("id-0"); - - const row: any = rendered.find("[data-rowid]").first(); - const cell: any = row.find("[data-cellid]").first(); - cell.simulate("keydown", { keyCode: keyCodePageDown }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("id-1"); - - cell.simulate("keydown", { keyCode: keyCodePageUp }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("id-0"); - - document.body.removeChild(container); - }); - - test("Focus and blur events change the state of isFocused", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - expect((rendered.instance() as any).isFocused).toBe(false); - - const row: any = rendered.find('[data-rowid="Thomas"]'); - const cell: any = row.find('[data-cellid="name"]'); - cell.simulate("focus"); - expect((rendered.instance() as any).isFocused).toBe(true); - - rendered.setProps({ rows: rowsShortened }); - expect(row.prop("className")).toContain( - managedClasses.dataGrid_row__focusedWithin - ); - expect((rendered.instance() as any).isFocused).toBe(true); - - cell.simulate("blur"); - expect((rendered.instance() as any).isFocused).toBe(false); - - document.body.removeChild(container); - }); - - test("rowHeightCallback prop is called and results applied", (): void => { - const heightCallback: any = jest.fn(); - heightCallback.mockReturnValue(50); - - const rendered: ReactWrapper = mount( - - ); - - expect(heightCallback).toHaveBeenCalledTimes(3); - expect((rendered.instance().state as DataGridState).rowPositions[2].end).toBe( - 150 - ); - }); - - test("rowHeightCallback prop is called and variable heights applied", (): void => { - const heightCallback: any = jest.fn(); - heightCallback.mockReturnValueOnce(50); - heightCallback.mockReturnValueOnce(300); - heightCallback.mockReturnValueOnce(50); - - const rendered: ReactWrapper = mount( - - ); - - expect(heightCallback).toHaveBeenCalledTimes(3); - expect((rendered.instance().state as DataGridState).rowPositions.length).toBe(3); - expect((rendered.instance().state as DataGridState).rowPositions[0].start).toBe( - 0 - ); - expect((rendered.instance().state as DataGridState).rowPositions[0].end).toBe(50); - expect((rendered.instance().state as DataGridState).rowPositions[1].start).toBe( - 50 - ); - expect((rendered.instance().state as DataGridState).rowPositions[1].end).toBe( - 350 - ); - expect((rendered.instance().state as DataGridState).rowPositions[2].start).toBe( - 350 - ); - expect((rendered.instance().state as DataGridState).rowPositions[2].end).toBe( - 400 - ); - }); - - test("reducing length of data array does not throw", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect((rendered.instance().state as DataGridState).rowPositions.length).toBe(3); - rendered.setProps({ rows: rowsShortened }); - expect((rendered.instance().state as DataGridState).rowPositions.length).toBe(2); - }); - - test("empty rowdata does not throw", (): void => { - const rowsEmptyRow: object[] = [{}, rowData1, rowData2, rowData3]; - - const rendered: ReactWrapper = mount( - - ); - - expect(() => { - rendered.setProps({ rows: rowsEmptyRow }); - }).not.toThrow(); - }); - - test("default focus props are applied", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - const row1: any = rendered.find('[data-rowid="Thomas"]'); - const cell: any = row1.find('[data-cellid="age"]'); - - expect(cell.props().tabIndex).toEqual(0); - - document.body.removeChild(container); - }); - - test("grid cells with focus target set focus the targeted element", (): void => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - const row: any = rendered.find("[data-rowid]").first(); - const cell: any = row.find("[data-cellid]").first(); - - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("name"); - - cell.simulate("keydown", { keyCode: keyCodeArrowRight }); - expect((rendered.instance().state as DataGridState).focusRowKey).toBe("Thomas"); - expect((rendered.instance().state as DataGridState).focusColumnKey).toBe("age"); - - expect((document.activeElement as HTMLElement).innerHTML).toBe("25"); - - document.body.removeChild(container); - }); - - test("grid row focus should stay in the same area as grid data changes", () => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: ReactWrapper = mount( - , - { - attachTo: container, - } - ); - - /* Focus this element - name age - --------- - | | | - | | x | - | | | - --------- - */ - const secondRowData: TestRowData = rows[1]; - const secondRow: ReactWrapper = rendered.find( - `[data-rowid="${secondRowData.name}"]` - ); - const secondRowLeftCell: ReactWrapper = secondRow.find('[data-cellid="name"]'); - secondRowLeftCell.simulate("keydown", { keyCode: keyCodeArrowRight }); - secondRowLeftCell.simulate("keydown", { keyCode: keyCodeArrowDown }); - expect((document.activeElement as HTMLElement).innerHTML).toBe( - secondRowData.age.toString() - ); - // Swap the 2nd and 3rd rows, expect focus to follow - const swappedRowData: TestRowData[] = [rows[0], rows[2], rows[1]]; - rendered.setProps({ rows: swappedRowData }); - /* Expect focus to be here - name age - --------- - | | | - | | | - | | x | << Old second row - --------- - */ - expect((document.activeElement as HTMLElement).innerHTML).toBe( - swappedRowData[2].age.toString() - ); - - // Remove the last row - const updatedTwoRowData: TestRowData[] = [rows[0], rows[2]]; - rendered.setProps({ rows: updatedTwoRowData }); - /* Expect focus to be here - name age - --------- - | | | - | | x | - --------- - */ - // note: because focusing on elements not in the dom at the time of the - // data change relies on context the actual active element does not change - // in the test environment, but we can check where focus would go. - expect(rendered.state("focusRowKey")).toBe(updatedTwoRowData[1].name); - - // Replace the second row, focus should stay there - const replacedTwoRowData: TestRowData[] = [rows[0], rows[1]]; - rendered.setProps({ rows: replacedTwoRowData }); - /* Expect focus to be here - name age - --------- - | | | - | | x | - --------- - */ - expect(rendered.state("focusRowKey")).toBe(replacedTwoRowData[1].name); - - // Remove the top row - const singleRowData: TestRowData[] = [rows[1]]; - rendered.setProps({ rows: singleRowData }); - /* Expect focus to be here - name age - --------- - | | x | - --------- - */ - expect(rendered.state("focusRowKey")).toBe(singleRowData[0].name); - - document.body.removeChild(container); - }); - - test("setting an invalid row key does not throw", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(() => { - rendered.setProps({ defaultFocusRowKey: "invalid" }); - }).not.toThrow(); - }); - - test("setting an invalid focus column does not throw", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(() => { - rendered.setProps({ defaultFocusColumnKey: "invalid" }); - }).not.toThrow(); - }); - - test("getRowIndexByKey returns expected index value", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(rendered.instance()["getRowIndexByKey"]("Richard")).toBe(1); - }); - - test("getRowIndexByKey does not throw with an invalid index", (): void => { - const rendered: ReactWrapper = mount( - - ); - - expect(() => { - rendered.instance()["getRowIndexByKey"]("invalid"); - }).not.toThrow(); - }); - - test("getIndexOfRowAtScrollPosition returns expected index values", (): void => { - const heightCallback: any = jest.fn(); - heightCallback.mockReturnValueOnce(50); - heightCallback.mockReturnValueOnce(300); - heightCallback.mockReturnValueOnce(50); - - const rendered: ReactWrapper = mount( - - ); - - const rowPositions: any = rendered.state("rowPositions"); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](0, rowPositions) - ).toBe(0); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](51, rowPositions) - ).toBe(1); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](200, rowPositions) - ).toBe(1); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](349, rowPositions) - ).toBe(1); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](350, rowPositions) - ).toBe(2); - expect( - rendered.instance()["getIndexOfRowAtScrollPosition"](400, rowPositions) - ).toBe(2); - }); -}); diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid.stories.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid.stories.tsx deleted file mode 100644 index a304746f82f..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid.stories.tsx +++ /dev/null @@ -1,324 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import { isEqual, omit } from "lodash-es"; -import DataGrid, { - DataGridCellRenderConfig, - DataGridColumn, - DataGridProps, - DataGridRowHeightCallbackParams, -} from "./index"; - -function imageCellFn(config: DataGridCellRenderConfig): React.ReactNode { - return ( -
    - Placeholder image -
    - ); -} - -function recordIdCellFn(config: DataGridCellRenderConfig): React.ReactNode { - return ( -
    - Placeholder image -
    - ); -} - -const columns: DataGridColumn[] = [ - { - columnDataKey: "recordId", - title: "RecordId", - columnWidth: "120px", - cell: recordIdCellFn, - }, - { - columnDataKey: "image", - title: "Image", - columnWidth: "auto", - cell: imageCellFn, - }, -]; - -function getDataSet(length: number): object[] { - const dataSet: object[] = []; - - for (let i: number = 0; i < length; i++) { - const heightString: string = i % 2 ? "/150/100" : "/300/200"; - dataSet.push({ - recordId: `id-${i + 1}`, - image: `https://picsum.photos/id/${Math.floor( - Math.random() * 1000 - )}${heightString}`, - }); - } - - return dataSet; -} - -function getRowHeight(row: DataGridRowHeightCallbackParams): number { - if (row.rowIndex % 2) { - return row.defaultRowHeight; - } - return row.defaultRowHeight * 2; -} - -interface DataGridTestState { - /** - * The dataset to show - */ - currentDataSet: object[]; -} - -interface DataGridTestProps extends Omit { - /** - * Primary data set - */ - primaryDataSet: object[]; - - /** - * Secondary data set - */ - secondaryDataSet: object[]; -} - -class DataGridTest extends React.Component { - constructor(props: DataGridTestProps) { - super(props); - - this.state = { - currentDataSet: this.props.primaryDataSet, - }; - } - - public render(): JSX.Element { - const { ...props }: Partial = omit(this.props, [ - "primaryDataSet", - "secondaryDataSet", - ]); - - return ( -
    - - -
    - ); - } - - private toggleDataSetButtonClick = (): void => { - if (isEqual(this.state.currentDataSet, this.props.primaryDataSet)) { - this.setState({ - currentDataSet: this.props.secondaryDataSet, - }); - } else { - this.setState({ - currentDataSet: this.props.primaryDataSet, - }); - } - }; -} - -storiesOf("Data Grid", module) - .add("Default", () => ( - - )) - .add("Default virtualized", () => ( - - )) - .add("Initially visible row", () => ( - - )) - .add("Initially visible row virtualized", () => ( - - )) - .add("Empty grid", () => ( - - )) - .add("Empty grid virtualized", () => ( - - )) - .add("Toggle smaller data set", () => ( - - )) - .add("Toggle smaller data set virtualized", () => ( - - )) - .add("Toggle empty data set", () => ( - - )) - .add("Toggle empty data set virtualized", () => ( - - )) - .add("Variable height rows", () => ( - - )) - .add("Large data set", () => ( - - )); diff --git a/packages/react/fast-components-react-base/src/data-grid/data-grid.tsx b/packages/react/fast-components-react-base/src/data-grid/data-grid.tsx deleted file mode 100644 index bb1aaaf3db6..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/data-grid.tsx +++ /dev/null @@ -1,1397 +0,0 @@ -import React, { ReactText } from "react"; -import { DataGridClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import { isNil } from "lodash-es"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames, Direction, KeyCodes } from "@microsoft/fast-web-utilities"; -import throttle from "raf-throttle"; -import { DisplayNamePrefix } from "../utilities"; -import StackPanel from "../stack-panel"; -import { - DataGridColumn, - DataGridHandledProps, - DataGridHeaderRenderConfig, - DataGridProps, - DataGridRowHeightCallbackParams, - DataGridUnhandledProps, -} from "./data-grid.props"; -import DataGridRow from "./data-grid-row"; -import { DataGridCellProps } from "./data-grid-cell.props"; -import { DataGridContext, DataGridContextType } from "./data-grid-context"; - -export interface DataGridState { - focusRowIndex: number; - focusRowKey: ReactText | null; - focusColumnKey: ReactText | null; - columns: DataGridColumn[]; - currentDataPageStartIndex: number; - currentDataPageEndIndex: number; - rowPositions: RowPosition[]; - estimatedTotalHeight: number; - desiredVisibleRowIndex: number | null; - desiredFocusRowKey: ReactText | null; - desiredFocusColumnKey: ReactText | null; -} - -/** - * Used to store the pixel coordinates and span of items - */ -interface RowPosition { - start: number; - span: number; - end: number; -} - -class DataGrid extends Foundation< - DataGridHandledProps, - DataGridUnhandledProps, - DataGridState -> { - public static defaultProps: Partial = { - rowHeight: 60, - stableRangeEndIndex: 0, - pageSize: 1000, - rowHeightCallback: (row: DataGridRowHeightCallbackParams) => { - return row.defaultRowHeight; - }, - virtualize: false, - managedClasses: {}, - }; - - public static displayName: string = `${DisplayNamePrefix}DataGrid`; - - /** - * default column render function - */ - public static renderColumnHeader = ( - config: DataGridHeaderRenderConfig - ): React.ReactNode => { - return ( -
    - {config.title} -
    - ); - }; - - /** - * generates a basic column definition by examining sample row data - */ - public static generateColumns = (row: object): DataGridColumn[] => { - const definitions: DataGridColumn[] = []; - const properties: string[] = Object.getOwnPropertyNames(row); - properties.forEach((property: string) => { - definitions.push({ - columnDataKey: property, - }); - }); - return definitions; - }; - - protected handledProps: HandledProps = { - dataRowKey: void 0, - rows: void 0, - columns: void 0, - rowHeight: void 0, - rowHeightCallback: void 0, - managedClasses: void 0, - defaultFocusColumnKey: void 0, - defaultFocusRowKey: void 0, - stableRangeEndIndex: void 0, - pageSize: void 0, - virtualize: void 0, - }; - - private currentTemplateColumns: string = ""; - private rootElement: React.RefObject = React.createRef< - HTMLDivElement - >(); - - private nonVirtualizedScrollContainer: React.RefObject< - HTMLDivElement - > = React.createRef(); - - private direction: Direction = Direction.ltr; - private isFocused: boolean = false; - private throttledScroll: throttle; - private lastReportedScrollPosition: number = 0; - private lastReportedViewportSpan: number = 0; - - /** - * constructor - */ - constructor(props: DataGridProps) { - super(props); - this.throttledScroll = throttle(this.handleStackPanelScrollChange); - - this.state = this.applyInitialState(); - } - - /** - * Renders the component - */ - public render(): React.ReactElement { - this.currentTemplateColumns = this.getGridTemplateColumns(); - - return ( - -
    - {this.renderGridHeader()} - {this.renderPanel()} -
    -     - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - const { - dataGrid, - dataGrid__virtualized, - }: DataGridClassNameContract = this.props.managedClasses; - - return super.generateClassNames( - classNames(dataGrid, [dataGrid__virtualized, this.props.virtualize]) - ); - } - - /** - * React life-cycle method - */ - public componentDidMount(): void { - if (this.state.desiredVisibleRowIndex !== null) { - this.scrollNonVirtualizedRowToTop(this.state.desiredVisibleRowIndex); - } - this.setState({ - desiredVisibleRowIndex: null, - }); - } - - /** - * componentDidUpdate when in non-virtualized mode - */ - public nonVirtualizedComponentUpdateHandler(prevProps: DataGridProps): void { - if (this.props.virtualize) { - // virtualization mode changed, reset - this.setState(this.applyInitialState()); - return; - } - - let shouldUpdateState: boolean = false; - - const newState: DataGridState = Object.assign({}, this.state); - - shouldUpdateState = this.applyUpdatedFocusProps(newState, prevProps); - - if (this.props.columns !== prevProps.columns) { - newState.columns = this.getColumns(); - shouldUpdateState = true; - } - - if (this.state.desiredVisibleRowIndex !== null) { - // move desired row into view and note that a state update is required - this.scrollNonVirtualizedRowToTop(this.state.desiredVisibleRowIndex); - newState.desiredVisibleRowIndex = null; - shouldUpdateState = true; - } - - // revalidate when there is new data - if (this.props.rows !== prevProps.rows) { - shouldUpdateState = true; - - if (this.props.rows.length === 0) { - this.getInitialStateObject(); - } else { - // ensure focus is still valid - this.validateFocusRowState(newState); - - // ensure data page conforms to new data length - // (not virtualizing, so cover the whole range) - newState.currentDataPageStartIndex = 0; - newState.currentDataPageEndIndex = this.props.rows.length - 1; - - // move focus to the new element if necessary - if ( - (this.isFocused && this.state.focusRowKey !== newState.focusRowKey) || - this.state.focusColumnKey !== newState.focusColumnKey - ) { - const rowElement: Element = this.getRowElementByKey( - newState.focusRowKey - ); - if (rowElement !== null) { - (rowElement as HTMLElement).focus(); - } - } - } - } - - if (shouldUpdateState) { - this.setState(newState); - } - } - - /** - * componentDidUpdate when in virtualized mode - */ - public virtualizedComponentUpdateHandler(prevProps: DataGridProps): void { - if (!this.props.virtualize) { - // virtualization mode changed, reset - this.setState(this.applyInitialState()); - return; - } - - let shouldUpdateState: boolean = false; - - let newState: DataGridState = Object.assign({}, this.state); - newState.desiredVisibleRowIndex = null; - - if (this.state.desiredVisibleRowIndex !== null) { - // note that a state update is required - shouldUpdateState = true; - } - - shouldUpdateState = this.applyUpdatedFocusProps(newState, prevProps); - - if (this.props.columns !== prevProps.columns) { - newState.columns = this.getColumns(); - shouldUpdateState = true; - } - - // revalidate when there is new data - if (this.props.rows !== prevProps.rows) { - shouldUpdateState = true; - - if (this.props.rows.length === 0) { - newState = this.getInitialStateObject(); - } else { - // if an author tells us nothing has changed before a certain point we keep position data - // up to that point. - newState.rowPositions = newState.rowPositions.slice( - 0, - this.props.stableRangeEndIndex - ); - - // ensure focus is still valid - this.validateFocusRowState(newState); - - // ensure data page conforms to new data length - newState.currentDataPageStartIndex = - newState.focusRowIndex - Math.floor(this.props.pageSize / 2); - - newState.currentDataPageStartIndex = Math.max( - 0, - newState.currentDataPageStartIndex - ); - - newState.currentDataPageEndIndex = - newState.currentDataPageStartIndex + this.props.pageSize; - - newState.currentDataPageEndIndex = - newState.currentDataPageEndIndex > this.props.rows.length - 1 - ? this.props.rows.length - 1 - : newState.currentDataPageEndIndex; - - this.sizeRowsToIndex( - newState.currentDataPageEndIndex, - newState.rowPositions - ); - newState.estimatedTotalHeight = this.getEstimatedTotalHeight( - newState.rowPositions - ); - - // move focus to the new element if necessary - if ( - (this.isFocused && this.state.focusRowKey !== newState.focusRowKey) || - this.state.focusColumnKey !== newState.focusColumnKey - ) { - const rowElement: Element = this.getRowElementByKey( - newState.focusRowKey - ); - if (rowElement !== null) { - // next focus element already exists, focus on it - (rowElement as HTMLElement).focus(); - newState.desiredFocusRowKey = null; - newState.desiredFocusColumnKey = null; - } else { - // next focus element not in the dom, - // focus on it after when it mounts - newState.desiredFocusRowKey = newState.focusRowKey; - newState.desiredFocusColumnKey = newState.focusColumnKey; - - // let the default behavior scroll into view on focus - newState.desiredVisibleRowIndex = null; - } - } - } - } - - if (shouldUpdateState) { - this.setState(newState); - } - } - - /** - * Updates focus row related state after an update - */ - private validateFocusRowState = (newState: DataGridState): DataGridState => { - const newFocusRowIndex: number = this.getRowIndexByKey(newState.focusRowKey); - if (newFocusRowIndex === -1) { - // our focus row no longer exists, assign a new one based on previous focus row index - newState.focusRowIndex = Math.min( - Math.max(newState.focusRowIndex, 0), - this.props.rows.length - 1 - ); - newState.focusRowKey = this.props.rows[newState.focusRowIndex][ - this.props.dataRowKey - ]; - } else { - newState.focusRowIndex = newFocusRowIndex; - } - - return newState; - }; - - /** - * Applies changes to focus row and focus column props to the provided state object - */ - private applyUpdatedFocusProps = ( - newState: DataGridState, - prevProps: DataGridProps - ): boolean => { - let shouldUpdateState: boolean = false; - - // apply a new focus columnkey if one is provided and it exists - if ( - this.props.defaultFocusColumnKey !== prevProps.defaultFocusColumnKey && - !isNil(this.props.defaultFocusColumnKey) && - this.getColumnIndexByKey( - this.props.defaultFocusColumnKey, - newState.columns - ) !== -1 - ) { - newState.focusColumnKey = this.props.defaultFocusColumnKey; - shouldUpdateState = true; - } - - // apply a new focus rowkey if one is provided and it exists - if ( - this.props.defaultFocusRowKey !== prevProps.defaultFocusRowKey && - !isNil(this.props.defaultFocusRowKey) - ) { - const newFocusRowIndex: number = this.getRowIndexByKey( - this.props.defaultFocusRowKey - ); - - if (newFocusRowIndex !== -1) { - newState.focusRowKey = this.props.defaultFocusRowKey; - newState.desiredVisibleRowIndex = newFocusRowIndex; - newState.focusRowIndex = newFocusRowIndex; - newState.currentDataPageStartIndex = Math.max( - 0, - newFocusRowIndex - Math.floor(this.props.pageSize / 2) - ); - newState.currentDataPageEndIndex = Math.min( - newState.currentDataPageStartIndex + this.props.pageSize, - this.props.rows.length - 1 - ); - - shouldUpdateState = true; - } - } - return shouldUpdateState; - }; - - /** - * Gets the initial state of the component based on virtualizion prop - * also used when prop is changed during component lifetime - */ - private applyInitialState = (): DataGridState => { - const newState: DataGridState = this.applyInitialFocusState( - this.getInitialStateObject() - ); - return this.props.virtualize - ? this.applyVirtualizedInitialState(newState) - : this.applyNonVirtualizedInitialState(newState); - }; - - /** - * Gets the virtualized mode initial state - * also used when prop is changed during component lifetime - */ - private applyVirtualizedInitialState = (newState: DataGridState): DataGridState => { - this.componentDidUpdate = this.virtualizedComponentUpdateHandler; - this.renderPanel = this.renderVirtualizingPanel; - - if (this.props.rows.length > 0) { - if (!isNil(this.props.defaultFocusRowKey)) { - newState.focusRowKey = this.props.defaultFocusRowKey; - newState.focusRowIndex = this.getRowIndexByKey(newState.focusRowKey); - } - - if (newState.focusRowIndex === -1) { - newState.focusRowIndex = 0; - newState.focusRowKey = this.props.rows[0][this.props.dataRowKey]; - } - - newState.currentDataPageStartIndex = Math.max( - 0, - newState.focusRowIndex - Math.floor(this.props.pageSize / 2) - ); - - newState.currentDataPageEndIndex = Math.min( - this.props.rows.length - 1, - newState.currentDataPageStartIndex + this.props.pageSize - ); - - this.sizeRowsToIndex(newState.currentDataPageEndIndex, newState.rowPositions); - - newState.estimatedTotalHeight = this.getEstimatedTotalHeight( - newState.rowPositions - ); - } - - return newState; - }; - - /** - * Gets the non-virtualized mode initial state - * also used when prop is changed during component lifetime - */ - private applyNonVirtualizedInitialState = ( - newState: DataGridState - ): DataGridState => { - this.componentDidUpdate = this.nonVirtualizedComponentUpdateHandler; - this.renderPanel = this.renderNonVirtualizingPanel; - - newState.currentDataPageStartIndex = this.props.rows.length > 0 ? 0 : -1; - newState.currentDataPageEndIndex = - this.props.rows.length > 0 ? this.props.rows.length - 1 : -1; - newState.rowPositions = []; - newState.estimatedTotalHeight = 0; - - return newState; - }; - - /** - * sets initial/reset focus rows - */ - private applyInitialFocusState = (newState: DataGridState): DataGridState => { - if (!isNil(this.props.defaultFocusRowKey)) { - newState.focusRowKey = this.props.defaultFocusRowKey; - newState.focusRowIndex = this.getRowIndexByKey(newState.focusRowKey); - } - - if (newState.focusRowIndex === -1 && this.props.rows.length > 0) { - newState.focusRowIndex = 0; - newState.focusRowKey = this.props.rows[0][this.props.dataRowKey]; - } - - if (newState.columns.length > 0) { - newState.focusColumnKey = - !isNil(this.props.defaultFocusColumnKey) && - this.getColumnIndexByKey( - this.props.defaultFocusColumnKey, - newState.columns - ) !== -1 - ? this.props.defaultFocusColumnKey - : newState.columns[0].columnDataKey; - } - - newState.desiredVisibleRowIndex = newState.focusRowIndex; - - return newState; - }; - - /** - * render the header - */ - private renderGridHeader = (): React.ReactElement => { - return ( -
    - {this.state.columns.map(this.renderColumnHeader)} -
    - ); - }; - - /** - * placeholder function until assignement based on virtualization mode - */ - private renderPanel = (): React.ReactElement => { - return null; - }; - - /** - * render a non-virtualizing panel - */ - private renderNonVirtualizingPanel = (): React.ReactElement => { - return ( -
    - {this.renderNonVirtualizedRows()} -
    - ); - }; - - /** - * render non virtualized data rows - */ - private renderNonVirtualizedRows = (): React.ReactChild[] => { - const rowsToRender: React.ReactChild[] = []; - this.props.rows.forEach((row: object, index: number) => { - rowsToRender.push(this.renderRow(row, index)); - }); - return rowsToRender; - }; - - /** - * render a virtualizing panel - */ - private renderVirtualizingPanel = (): React.ReactElement => { - const itemSpans: number[] = []; - - if (this.state.rowPositions.length > 0) { - itemSpans.push( - this.state.rowPositions[this.state.currentDataPageStartIndex].start - ); - - if (typeof this.props.rowHeightCallback === "function") { - for ( - let i: number = this.state.currentDataPageStartIndex; - i <= this.state.currentDataPageEndIndex; - i++ - ) { - itemSpans.push(this.state.rowPositions[i].span); - } - } - itemSpans.push( - this.state.estimatedTotalHeight - - this.state.rowPositions[this.state.currentDataPageEndIndex].end - ); - } - - const stackPanelVisibleItemIndex: number | null = - this.state.desiredVisibleRowIndex !== null - ? this.convertRowIndexToStackPanelIndex( - this.state.desiredVisibleRowIndex, - this.state.currentDataPageStartIndex, - this.state.currentDataPageEndIndex - ) - : null; - - const { - dataGrid_scrollingPanel, - dataGrid_scrollingPanelItems, - dataGrid_scrollingPanel__scrollable, - }: DataGridClassNameContract = this.props.managedClasses; - - return ( - - {this.renderVirtualizedRows()} - - ); - }; - - /** - * render the data rows - */ - private renderVirtualizedRows = (): React.ReactChild[] => { - const rowsToRender: React.ReactChild[] = []; - rowsToRender.push(
    ); - for ( - let i: number = this.state.currentDataPageStartIndex; - i <= this.state.currentDataPageEndIndex; - i++ - ) { - rowsToRender.push(this.renderRow(this.props.rows[i], i)); - } - rowsToRender.push(
    ); - return rowsToRender; - }; - - /** - * render each column header - */ - private renderColumnHeader = ( - column: DataGridColumn, - index: number - ): React.ReactNode => { - const { - dataGrid_columnHeader, - }: DataGridClassNameContract = this.props.managedClasses; - - const config: DataGridHeaderRenderConfig = { - title: isNil(column.title) ? column.columnDataKey : column.title, - key: column.columnDataKey, - columnIndex: index, - classNames: dataGrid_columnHeader, - }; - - if (!isNil(column.header)) { - return column.header(config); - } else { - return DataGrid.renderColumnHeader(config); - } - }; - - /** - * Render a single data row - */ - private renderRow = (rowData: object, index: number): React.ReactChild => { - if (isNil(rowData)) { - return; - } - const rowKey: React.ReactText = !isNil(rowData[this.props.dataRowKey]) - ? rowData[this.props.dataRowKey] - : index; - const { - dataGrid_row, - dataGrid_row__focusedWithin, - dataGrid_cell, - }: DataGridClassNameContract = this.props.managedClasses; - - return ( - - ); - }; - - /** - * Generates the grid template column css string - */ - private getGridTemplateColumns = (): string => { - let templateColumns: string = ""; - - this.state.columns.forEach((column: DataGridColumn) => { - templateColumns = `${templateColumns} ${ - isNil(column.columnWidth) ? "1fr" : column.columnWidth - }`; - }); - - return templateColumns; - }; - - /** - * Handle grid focus - */ - private handleGridFocus = (): void => { - this.isFocused = true; - }; - - /** - * Handle grid blur by setting focused state - */ - private handleGridBlur = (e: React.FocusEvent): void => { - const root: HTMLDivElement = this.rootElement.current; - // If we focus outside of the data grid - if (!!root && !root.contains(e.relatedTarget as HTMLElement)) { - this.isFocused = false; - } - }; - - /** - * Handle the keydown event of the item - */ - private handleCellKeyDown = ( - cell: DataGridCellProps, - e: React.KeyboardEvent - ): void => { - if (e.defaultPrevented) { - return; - } - - switch (e.keyCode) { - case KeyCodes.arrowDown: - e.preventDefault(); - this.incrementFocusRow(1); - break; - - case KeyCodes.arrowRight: - this.incrementFocusColumn(1); - e.preventDefault(); - break; - - case KeyCodes.arrowUp: - this.incrementFocusRow(-1); - e.preventDefault(); - break; - - case KeyCodes.arrowLeft: - this.incrementFocusColumn(-1); - e.preventDefault(); - break; - - case KeyCodes.pageDown: - this.incrementFocusPage(1); - e.preventDefault(); - break; - - case KeyCodes.pageUp: - this.incrementFocusPage(-1); - e.preventDefault(); - break; - - case KeyCodes.home: - if (e.ctrlKey) { - this.incrementFocusRow(-this.props.rows.length); - } else { - this.incrementFocusColumn(-this.state.columns.length); - } - e.preventDefault(); - break; - - case KeyCodes.end: - if (e.ctrlKey) { - this.incrementFocusRow(this.props.rows.length); - } else { - this.incrementFocusColumn(this.state.columns.length); - } - e.preventDefault(); - break; - } - }; - - /** - * get the estimated total height of the datagrid based on row heights calculated so far - */ - private getEstimatedTotalHeight = (rowPositions: RowPosition[]): number => { - if (rowPositions.length === 0) { - return 0; - } - const estimatedTotalHeight: number = - rowPositions[rowPositions.length - 1].end + - (this.props.rows.length - rowPositions.length) * this.props.rowHeight; - - return estimatedTotalHeight; - }; - - /** - * calculate total height of rows to target index - * note: this modifies the provided rowposition array directly - */ - private sizeRowsToIndex = ( - targetIndex: number, - rowPositions: RowPosition[] - ): void => { - if (rowPositions.length - 1 < targetIndex) { - const startIndex: number = rowPositions.length; - const endIndex: number = - targetIndex > this.props.rows.length - 1 - ? this.props.rows.length - 1 - : targetIndex; - for (let i: number = startIndex; i <= endIndex; i++) { - const thisRowStart: number = i === 0 ? 0 : rowPositions[i - 1].end; - const thisRowHeight: number = this.props.rowHeightCallback({ - rowData: this.props.rows[i], - rowIndex: i, - defaultRowHeight: this.props.rowHeight, - }); - rowPositions.push({ - start: thisRowStart, - span: thisRowHeight, - end: thisRowStart + thisRowHeight, - }); - } - } - }; - - /** - * size rows to target scroll value - * appends rowposition data until the bottom of the last item - * is greater than target scroll value. - * note: this modifies the provided rowposition array directly - */ - private sizeRowsToScrollValue = ( - targetScrollValue: number, - rowPositions: RowPosition[] - ): void => { - if (rowPositions[rowPositions.length - 1].end < targetScrollValue) { - const startIndex: number = rowPositions.length; - const endIndex: number = this.props.rows.length - 1; - for (let i: number = startIndex; i <= endIndex; i++) { - const thisRowStart: number = i === 0 ? 0 : rowPositions[i - 1].end; - const thisRowHeight: number = this.props.rowHeightCallback({ - rowData: this.props.rows[i], - rowIndex: i, - defaultRowHeight: this.props.rowHeight, - }); - const thisRowEnd: number = thisRowStart + thisRowHeight; - rowPositions.push({ - start: thisRowStart, - span: thisRowHeight, - end: thisRowEnd, - }); - if (thisRowEnd >= targetScrollValue) { - break; - } - } - } - }; - - /** - * handle scroll events from the stackpanel - */ - private handleStackPanelScrollChange = ( - newScrollValue: number, - scrollMaxValue: number, - viewportSpan: number - ): void => { - const currentPageTop: number = this.state.rowPositions[ - this.state.currentDataPageStartIndex - ].start; - const currentPageBottom: number = this.state.rowPositions[ - this.state.currentDataPageEndIndex - ].end; - const currentViewportBottom: number = newScrollValue + viewportSpan; - - this.lastReportedScrollPosition = newScrollValue; - this.lastReportedViewportSpan = viewportSpan; - - if ( - this.state.rowPositions[this.state.focusRowIndex].start > - currentViewportBottom || - this.state.rowPositions[this.state.focusRowIndex].end < newScrollValue - ) { - const topVisibleElementIndex: number = this.getIndexOfRowAtScrollPosition( - newScrollValue, - this.state.rowPositions - ); - if (topVisibleElementIndex === -1) { - this.setState({ - focusRowKey: "", - }); - } else { - this.setState({ - focusRowKey: this.props.rows[topVisibleElementIndex][ - this.props.dataRowKey - ], - }); - } - } - - if ( - newScrollValue < currentPageTop || - currentViewportBottom > currentPageBottom - ) { - const newRowPositions: RowPosition[] = this.state.rowPositions.slice(0); - - const middleViewportPosition: number = Math.floor( - newScrollValue + viewportSpan / 2 - ); - const middleItemIndex: number = this.getIndexOfRowAtScrollPosition( - middleViewportPosition, - newRowPositions - ); - - let newDataPageStartIndex: number = - middleItemIndex - Math.floor(this.props.pageSize / 2); - if (newDataPageStartIndex < 0) { - newDataPageStartIndex = 0; - } - - let newDataPageEndIndex: number = - newDataPageStartIndex + this.props.pageSize - 1; - if (newDataPageEndIndex > this.props.rows.length - 1) { - newDataPageEndIndex = this.props.rows.length - 1; - } - - this.sizeRowsToIndex(newDataPageEndIndex, newRowPositions); - - this.setState({ - currentDataPageStartIndex: newDataPageStartIndex, - currentDataPageEndIndex: newDataPageEndIndex, - rowPositions: newRowPositions, - estimatedTotalHeight: this.getEstimatedTotalHeight(newRowPositions), - }); - } - }; - - /** - * returns the index of row item at a particular scroll position - */ - private getIndexOfRowAtScrollPosition = ( - scrollPosition: number, - rowPositions: RowPosition[] - ): number => { - // handle virtualizing display - if (this.props.virtualize) { - if (rowPositions.length === 0) { - return -1; - } - - scrollPosition = Math.max(0, scrollPosition); - - this.sizeRowsToScrollValue(scrollPosition, rowPositions); - const maxIndex = Math.min(rowPositions.length - 1); - - const estimatedItemIndex: number = Math.min( - maxIndex, - Math.floor(scrollPosition / this.props.rowHeight) - ); - - if (scrollPosition < rowPositions[estimatedItemIndex].start) { - for (let i: number = estimatedItemIndex; i >= 0; i--) { - if (rowPositions[i].start < scrollPosition) { - return i; - } - } - return 0; - } else if (scrollPosition > rowPositions[estimatedItemIndex].end) { - let maxRowpositionSizedIndex: number = rowPositions.length - 1; - for (let i: number = estimatedItemIndex; i <= maxIndex; i++) { - if (i > maxRowpositionSizedIndex) { - this.sizeRowsToIndex(i, rowPositions); - maxRowpositionSizedIndex++; - } - if (rowPositions[i].end > scrollPosition) { - return i; - } - } - return maxIndex; - } - - return estimatedItemIndex; - } - - // handle non-virtualizing display - if (this.nonVirtualizedScrollContainer.current === null) { - return; - } - - const rows: HTMLElement[] = this.getRenderedRows(); - const rowCount = rows.length; - for (let i: number = 0; i < rowCount; i++) { - if (rows[i].offsetTop >= scrollPosition) { - return i; - } - } - - return rowCount - 1; - }; - - /** - * move focus up/down one viewport's worth of items - */ - private incrementFocusPage = (direction: number): void => { - const newRowPositions = this.state.rowPositions.slice(0); - let nextItemIndex: number = -1; - - if (this.props.virtualize) { - const nextItemScrollPosition: number = - direction > 0 - ? this.lastReportedScrollPosition + this.lastReportedViewportSpan + 1 - : this.lastReportedScrollPosition - this.lastReportedViewportSpan + 1; - - nextItemIndex = this.getIndexOfRowAtScrollPosition( - nextItemScrollPosition, - newRowPositions - ); - } else if (this.nonVirtualizedScrollContainer.current !== null) { - const newScrollPosition: number = Math.min( - direction > 0 - ? this.nonVirtualizedScrollContainer.current.scrollTop + - this.nonVirtualizedScrollContainer.current.clientHeight + - 1 - : this.nonVirtualizedScrollContainer.current.scrollTop - - this.nonVirtualizedScrollContainer.current.clientHeight + - 1, - this.nonVirtualizedScrollContainer.current.scrollHeight - ); - nextItemIndex = this.getIndexOfRowAtScrollPosition( - newScrollPosition, - this.state.rowPositions - ); - this.scrollNonVirtualizedRowToTop(nextItemIndex); - } - - // don't get stuck on items that span the viewport - if (nextItemIndex === this.state.focusRowIndex) { - if (direction > 0 && nextItemIndex < this.props.rows.length - 1) { - nextItemIndex++; - } else if (direction < 0 && nextItemIndex > 0) { - nextItemIndex; - } - } - - this.focusOnCell( - this.props.rows[nextItemIndex][this.props.dataRowKey], - this.state.focusColumnKey, - newRowPositions, - true - ); - }; - - /** - * move focus to another row - */ - private incrementFocusRow = (direction: number): void => { - let currentFocusRowIndex: number = this.getRowIndexByKey(this.state.focusRowKey); - - if (currentFocusRowIndex === -1) { - currentFocusRowIndex = - this.state.focusRowIndex < this.props.rows.length - ? this.state.focusRowIndex - : this.props.rows.length - 1; - } - - let newFocusRowIndex: number = currentFocusRowIndex + direction; - if (newFocusRowIndex < 0) { - newFocusRowIndex = 0; - } else if (newFocusRowIndex >= this.props.rows.length) { - newFocusRowIndex = this.props.rows.length - 1; - } - const newFocusRowKey: React.ReactText = this.props.rows[newFocusRowIndex][ - this.props.dataRowKey - ]; - - const focusRowElement: Element = this.getRowElementByKey(newFocusRowKey); - const focusCell: Element = this.getCellElementByKey( - this.state.focusColumnKey, - focusRowElement - ); - - if (isNil(focusCell)) { - return; - } - (focusCell as HTMLElement).focus(); - }; - - /** - * move focus to another column - */ - private incrementFocusColumn = (direction: number): void => { - this.updateDirection(); - - let currentFocusColumnIndex: number = this.getColumnIndexByKey( - this.state.focusColumnKey, - this.state.columns - ); - - if (currentFocusColumnIndex === -1) { - currentFocusColumnIndex = 0; - } - - const newFocusColumnIndex: number = Math.min( - Math.max(currentFocusColumnIndex + direction * (Direction.ltr ? 1 : -1), 0), - this.state.columns.length - 1 - ); - - const newFocusColumnKey: React.ReactText = this.state.columns[newFocusColumnIndex] - .columnDataKey; - - const rowElement: Element = this.getRowElementByKey(this.state.focusRowKey); - - if (isNil(rowElement)) { - return; - } - - const cellElement: Element = this.getCellElementByKey( - newFocusColumnKey, - rowElement - ); - - if (cellElement instanceof HTMLElement) { - cellElement.focus(); - } - }; - - /** - * Get all rendered rows - */ - private getRenderedRows = (): HTMLElement[] => { - if (isNil(this.rootElement.current)) { - return null; - } - let rows: HTMLElement[] = Array.from( - this.rootElement.current.querySelectorAll("[role='row']") - ); - // remove the header row - if (rows.length > 0) { - rows = rows.slice(1); - } - return rows; - }; - - /** - * Get row element by key - */ - private getRowElementByKey = (rowId: React.ReactText): Element => { - if (isNil(this.rootElement.current)) { - return null; - } - return this.rootElement.current.querySelector(`[data-rowid=${rowId}]`); - }; - - /** - * Get cell element by key - */ - private getCellElementByKey = ( - columnKey: React.ReactText, - rowElement: Element - ): Element => { - if (isNil(rowElement)) { - return null; - } - - return rowElement.querySelector(`[data-cellid=${columnKey}]`); - }; - - /** - * Move focus to a cell in the whole dataset based on row and cell id - */ - private focusOnCell = ( - rowId: React.ReactText, - cellId: React.ReactText, - rowPositions: RowPosition[], - forceScrollRowToTop: boolean - ): void => { - const rowIndex: number = this.getRowIndexByKey(rowId); - - if (rowIndex === -1) { - //no such row id - return; - } - - if ( - rowIndex >= this.state.currentDataPageStartIndex && - rowIndex <= this.state.currentDataPageEndIndex - ) { - // see if the element is in the dom and focus it, otherwise falls back to setting desired focus - const rowElement: Element = this.getRowElementByKey(rowId); - if (rowElement !== null) { - const cellElement: Element = this.getCellElementByKey(cellId, rowElement); - this.setState({ - desiredVisibleRowIndex: forceScrollRowToTop ? rowIndex : null, - }); - if (cellElement !== null) { - (cellElement as HTMLElement).focus(); - return; - } - } - } else { - // shift the items passed to the stack panel to include the desired row indexes - let newDataPageStartIndex: number = - rowIndex - Math.floor(this.props.pageSize / 2); - if (newDataPageStartIndex < 0) { - newDataPageStartIndex = 0; - } - - let newDataPageEndIndex: number = - newDataPageStartIndex + this.props.pageSize - 1; - if (newDataPageEndIndex > this.props.rows.length - 1) { - newDataPageEndIndex = this.props.rows.length - 1; - } - - this.sizeRowsToIndex(newDataPageEndIndex, rowPositions); - - this.setState({ - currentDataPageStartIndex: newDataPageStartIndex, - currentDataPageEndIndex: newDataPageEndIndex, - rowPositions: rowPositions, - estimatedTotalHeight: this.getEstimatedTotalHeight(rowPositions), - }); - } - - this.setState({ - desiredVisibleRowIndex: forceScrollRowToTop ? rowIndex : null, - desiredFocusRowKey: rowId, - desiredFocusColumnKey: cellId, - }); - }; - - /** - * Get column index by key - */ - private getColumnIndexByKey = ( - columnKey: React.ReactText, - columns: DataGridColumn[] - ): number => { - return columns.findIndex((column: DataGridColumn) => { - return column.columnDataKey === columnKey; - }); - }; - - /** - * Get row index by key - */ - private getRowIndexByKey = (rowKey: ReactText): number => { - const rowIndex: number = this.props.rows.findIndex((dataRow: object) => { - return dataRow[this.props.dataRowKey] === rowKey; - }); - return rowIndex; - }; - - /** - * Handle focus event - */ - private handleCellFocus = ( - cell: DataGridCellProps, - e: React.FocusEvent - ): void => { - if (e.defaultPrevented) { - return; - } - - const focusRowKey: ReactText = cell.rowData[this.props.dataRowKey]; - - this.setState({ - focusRowKey, - focusColumnKey: cell.column.columnDataKey, - focusRowIndex: this.getRowIndexByKey(focusRowKey), - desiredFocusRowKey: null, - desiredFocusColumnKey: null, - }); - }; - - /** - * Updates the direction - */ - private updateDirection = (): void => { - if (this.rootElement.current === null) { - return; - } - - const closest: Element = this.rootElement.current.closest(`[dir]`); - - if (closest === null) { - this.direction = Direction.ltr; - return; - } - - this.direction = - closest.getAttribute("dir").toLowerCase() === "rtl" - ? Direction.rtl - : Direction.ltr; - }; - - /** - * Converts a row index in the base dataset to an index in the current data page - * passed to the stack panel. Returns -1 if outside that range. - */ - private convertRowIndexToStackPanelIndex = ( - rowIndex: number, - dataPageStartIndex: number, - dataPageEndIndex: number - ): number => { - if (rowIndex < dataPageStartIndex || rowIndex > dataPageEndIndex) { - return -1; - } - - return rowIndex - dataPageStartIndex + 1; - }; - - /** - * Scrolls the desired row into view in non-virtualized mode - */ - private scrollNonVirtualizedRowToTop = (rowIndex: number): void => { - if ( - !this.props.virtualize && - !isNil(this.nonVirtualizedScrollContainer.current) && - this.props.rows.length > rowIndex && - rowIndex > -1 - ) { - const rows: HTMLElement[] = this.getRenderedRows(); - if (rows.length <= rowIndex) { - return; - } - this.nonVirtualizedScrollContainer.current.scrollTop = - rows[rowIndex].offsetTop; - } - }; - - /** - * gets a state object with initial values - */ - private getInitialStateObject = (): DataGridState => { - const newState: DataGridState = { - focusRowIndex: -1, - focusRowKey: null, - focusColumnKey: null, - columns: this.getColumns(), - currentDataPageStartIndex: -1, - currentDataPageEndIndex: -1, - rowPositions: [], - estimatedTotalHeight: 0, - desiredVisibleRowIndex: null, - desiredFocusRowKey: null, - desiredFocusColumnKey: null, - }; - - return newState; - }; - - /** - * gets the current column configuration - */ - private getColumns = (): DataGridColumn[] => { - return isNil(this.props.columns) - ? this.props.rows.length > 0 - ? DataGrid.generateColumns(this.props.rows[0]) - : null - : this.props.columns; - }; -} - -export default DataGrid; -export * from "./data-grid.props"; -export { DataGridContext, DataGridContextType, DataGridClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/data-grid/index.ts b/packages/react/fast-components-react-base/src/data-grid/index.ts deleted file mode 100644 index 792a353072b..00000000000 --- a/packages/react/fast-components-react-base/src/data-grid/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import DataGrid from "./data-grid"; -import dataGridCellSchema from "./data-grid-cell.schema"; -import dataGridRowSchema from "./data-grid-row.schema"; -import dataGridSchema from "./data-grid.schema"; - -export default DataGrid; -export { dataGridCellSchema, dataGridRowSchema, dataGridSchema }; -export * from "./data-grid"; -export * from "./data-grid-row"; -export * from "./data-grid-cell"; diff --git a/packages/react/fast-components-react-base/src/dialog/README.md b/packages/react/fast-components-react-base/src/dialog/README.md deleted file mode 100644 index c41f0932df3..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Dialog -The *dialog* component accepts children and can either be a modal, or a non-modal *dialog*. Modal *dialogs* prevent users from interacting with the rest of the page content, while non-modal *dialogs* allow users the ability to continue interacting with the page. The width and height of the *dialog* content area can be set by props, or if no props are passed, height and width will be set to default values. - -Modal dialogs actively force focus to the first focusable child of the dialog wheneven it detects focus in the root document that is not within the dialog itself. - -Modal *dialogs* also manage keyboard focus by listening to keydown events. Any time the Tab key is pressed when the focus is on the last element in the *dialog*'s tab focus will automatically be moved to the first item in the tab order. Conversely, any time Shift+Tab is pressed while focus is on the first item in the tab order focus will be moved to the last item in the tab order. Authors wishing to override this behavior can mark keydown events with "preventDefault()". - -## Accessibility -Learn more about *dialog* accessibility at [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role) and [W3C WAI-ARIA documentation](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.props.ts b/packages/react/fast-components-react-base/src/dialog/dialog.props.ts deleted file mode 100644 index 58269bc3686..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.props.ts +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; -import { - DialogClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type DialogUnhandledProps = React.HTMLAttributes; -export type DialogManagedClasses = ManagedClasses; -export interface DialogHandledProps extends DialogManagedClasses { - /** - * The dialog content - */ - children?: React.ReactNode | React.ReactNode[]; - - /** - * The dialog content width - */ - contentWidth?: string; - - /** - * The dialog content height - */ - contentHeight?: string; - - /** - * The aria-describedby attribute to link the dialog to an - * element that describes its purpose - */ - describedBy?: string; - - /** - * The aria-label to provide an accessible name for the dialog - */ - label?: string; - - /** - * The aria-labelledby attribute to link the dialog to an existing - * element that provides it an accessible name - */ - labelledBy?: string; - - /** - * The option to add modal functionality and prevent a user - * from interacting with elements outside the dialog - */ - modal?: boolean; - - /** - * Defines where focus goes when the dialog is unmounted. - * This is useful because modal dialogs will take focus back until that point in their life cycle. - * The element or ref provided will be focused when the dialog unmounts. - * Alternatively, providing a callback function gives developers more flexibility if needed. - */ - focusTargetOnClose?: React.RefObject | HTMLElement | (() => void); - - /** - * The onDismiss callback - * Callback is registered on click of the modal overlay or when escape key is pressed - */ - onDismiss?: (e?: React.MouseEvent | KeyboardEvent | React.TouchEvent) => void; - - /** - * Sets the visibility of the dialog to assistive technologies - * If true, aria-hidden is false - */ - visible?: boolean; -} - -export type DialogProps = DialogHandledProps & DialogUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.schema.2.ts b/packages/react/fast-components-react-base/src/dialog/dialog.schema.2.ts deleted file mode 100644 index 438d1ee6d3e..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.schema.2.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Dialog", - description: "A dialog component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/dialog", - formPluginId: "@microsoft/fast-components-react-base/dialog", - properties: { - describedBy: { - title: "HTML aria-describedby attribute", - type: "string", - examples: ["exampleId01"], - }, - label: { - title: "HTML aria-label attribute", - type: "string", - examples: ["Dialog label"], - }, - labelledBy: { - title: "HTML aria-labelledby attribute", - type: "string", - examples: ["exampleId02"], - }, - contentHeight: { - title: "Content height", - type: "string", - examples: ["300px"], - }, - contentWidth: { - title: "Content width", - type: "string", - examples: ["500px"], - }, - modal: { - title: "Modal", - type: "boolean", - }, - visible: { - title: "Visible", - type: "boolean", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/dialog/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.schema.ts b/packages/react/fast-components-react-base/src/dialog/dialog.schema.ts deleted file mode 100644 index e971eb3b0fb..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.schema.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Dialog", - description: "A dialog component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/dialog", - formPluginId: "@microsoft/fast-components-react-base/dialog", - properties: { - describedBy: { - title: "HTML aria-describedby attribute", - type: "string", - examples: ["exampleId01"], - }, - label: { - title: "HTML aria-label attribute", - type: "string", - examples: ["Dialog label"], - }, - labelledBy: { - title: "HTML aria-labelledby attribute", - type: "string", - examples: ["exampleId02"], - }, - contentHeight: { - title: "Content height", - type: "string", - examples: ["300px"], - }, - contentWidth: { - title: "Content width", - type: "string", - examples: ["500px"], - }, - modal: { - title: "Modal", - type: "boolean", - }, - visible: { - title: "Visible", - type: "boolean", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/dialog/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.spec.tsx b/packages/react/fast-components-react-base/src/dialog/dialog.spec.tsx deleted file mode 100644 index 6093d6854a3..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.spec.tsx +++ /dev/null @@ -1,368 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import { keyCodeEscape } from "@microsoft/fast-web-utilities"; -import { DisplayNamePrefix } from "../utilities"; -import Dialog, { - DialogClassNameContract, - DialogHandledProps, - DialogProps, - DialogUnhandledProps, -} from "./dialog"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("dialog", (): void => { - const managedClasses: DialogClassNameContract = { - dialog: "dialog-class", - dialog_contentRegion: "dialog-content-region-class", - dialog_modalOverlay: "dialog-modal-overlay-class", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Dialog as any).name}`).toBe(Dialog.displayName); - }); - - test("should have correct element attribute role 'dialog'", () => { - const rendered: any = shallow(); - expect( - rendered.find(`.${managedClasses.dialog_contentRegion}`).prop("role") - ).toBe("dialog"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - shallow(); - }).not.toThrow(); - }); - - test("should return an object that includes all valid props which are not enumerated as handledProps", () => { - const handledProps: DialogHandledProps = { - managedClasses, - label: "Dialog label", - }; - - const unhandledProps: any = { - "data-m": "foo", - } as DialogUnhandledProps; - - const props: DialogProps = { ...handledProps, ...unhandledProps }; - - const rendered: any = shallow(); - - expect(rendered.prop("data-m")).not.toBe(undefined); - expect(rendered.prop("data-m")).toEqual("foo"); - }); - - test("should add an `aria-label` attribute to the `dialog` element when the `label` prop is provided", () => { - const label: string = "Dialog"; - const rendered: any = shallow( - - ); - - expect( - rendered.find(`.${managedClasses.dialog_contentRegion}`).prop("aria-label") - ).toEqual(label); - }); - - test("should add an `aria-labelledby` attribute to the `dialog` element when the `labelledby` prop is provided", () => { - const labelledby: string = "Dialog"; - const rendered: any = shallow( - - ); - - expect( - rendered - .find(`.${managedClasses.dialog_contentRegion}`) - .prop("aria-labelledby") - ).toEqual(labelledby); - }); - - test("should add an `aria-describedBy` attribute to the `dialog` element when the `describedBy` prop is provided", () => { - const describedby: string = "Dialog"; - const rendered: any = shallow( - - ); - - expect( - rendered - .find(`.${managedClasses.dialog_contentRegion}`) - .prop("aria-describedby") - ).toEqual(describedby); - }); - - test('should have an attribute of `aria-hidden="true"` when the `visible` prop is false', () => { - const rendered: any = shallow( - - ); - - expect(rendered.find(`.${managedClasses.dialog}`).prop("aria-hidden")).toEqual( - true - ); - }); - - test('should have an attribute of `aria-hidden="false"` when the `visible` prop is true', () => { - const rendered: any = shallow( - - ); - - expect(rendered.find(`.${managedClasses.dialog}`).prop("aria-hidden")).toEqual( - false - ); - }); - - test('should have an attribute of `aria-modal="true"` when the `modal` prop is true', () => { - const rendered: any = shallow( - - ); - - expect( - rendered.find(`.${managedClasses.dialog_contentRegion}`).prop("aria-modal") - ).toEqual(true); - }); - - test('should NOT have an attribute of `aria-modal="false"` when the `modal` prop is false', () => { - const rendered: any = shallow( - - ); - - expect( - rendered.find(`.${managedClasses.dialog_contentRegion}`).prop("aria-modal") - ).toEqual(false); - }); - - test("should NOT have an attribute of `aria-modal` when the `modal` prop is not provided", () => { - const rendered: any = shallow(); - - expect( - rendered.find(`.${managedClasses.dialog_contentRegion}`).prop("aria-modal") - ).toEqual(undefined); - }); - - test("should call the `onDismiss` callback after a click event on the modal overlay when `visible` prop is true", () => { - const onDismiss: any = jest.fn(); - const rendered: any = shallow( - - ); - - rendered.find(`.${managedClasses.dialog_modalOverlay}`).simulate("click"); - - expect(onDismiss).toHaveBeenCalledTimes(0); - - rendered.setProps({ visible: true }); - - rendered.find(`.${managedClasses.dialog_modalOverlay}`).simulate("click"); - - expect(onDismiss).toHaveBeenCalledTimes(1); - }); - - test("should call the `onDismiss` callback when escape key is pressed and `visible` prop is true", () => { - const onDismiss: any = jest.fn(); - const preventDefaultFn: any = jest.fn(); - const map: any = {}; - - // Mock window.addEventListener - document.addEventListener = jest.fn((event: string, callback: any) => { - map[event] = callback; - }); - - const rendered: any = mount( - - ); - - map.keydown({ keyCode: keyCodeEscape, preventDefault: preventDefaultFn }); - - expect(onDismiss).toHaveBeenCalledTimes(0); - - // set visible prop - rendered.setProps({ visible: true }); - - map.keydown({ keyCode: keyCodeEscape, preventDefault: preventDefaultFn }); - - expect(onDismiss).toHaveBeenCalledTimes(1); - }); - - test("should remove keydown event listener for the `onDismiss` callback when component unmounts", () => { - const onDismiss: any = jest.fn(); - const preventDefaultFn: any = jest.fn(); - const map: any = {}; - - // Mock document.removeEventListener - document.removeEventListener = jest.fn((event: string, callback: any) => { - map[event] = callback; - }); - - const rendered: any = mount( - - ); - - rendered.unmount(); - - map.keydown({ keyCode: keyCodeEscape, preventDefault: preventDefaultFn }); - - expect(onDismiss).toHaveBeenCalledTimes(1); - }); - - test("modal dialogs should add document 'focusin' listener on mount", () => { - const map: any = {}; - - const mockAddListenerFn: any = jest.fn((event: string, callback: any) => { - map[event] = callback; - }); - - document.addEventListener = mockAddListenerFn; - - const rendered: any = mount( - - ); - - expect(mockAddListenerFn).toHaveBeenCalledTimes(2); - expect(mockAddListenerFn.mock.calls[1][0]).toBe("focusin"); - - rendered.unmount(); - }); - - test("non modal dialogs should not add document 'focusin' listener on mount", () => { - const map: any = {}; - - const mockAddListenerFn: any = jest.fn((event: string, callback: any) => { - map[event] = callback; - }); - - document.addEventListener = mockAddListenerFn; - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: any = mount( - - ); - - expect(mockAddListenerFn).toHaveBeenCalledTimes(0); - }); - - test("modal dialogs should remove document 'focusin' listener on dismount", () => { - const map: any = {}; - - const mockRemoveListenerFn: any = jest.fn((event: string, callback: any) => { - map[event] = callback; - }); - - document.removeEventListener = mockRemoveListenerFn; - - const rendered: any = mount( - - ); - - rendered.unmount(); - - expect(mockRemoveListenerFn).toHaveBeenCalledTimes(2); - expect(mockRemoveListenerFn.mock.calls[1][0]).toBe("focusin"); - }); - test("should detect whether the provided element is in or out of dialog", () => { - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( -
    - - -
    , - { attachTo: container } - ); - - const dialog: any = rendered.find("BaseDialog"); - const innerButton: Element = document.getElementById("innerButton"); - const outerButton: Element = document.getElementById("outerButton"); - expect(dialog.instance()["shouldForceFocus"](innerButton)).toEqual(false); - expect(dialog.instance()["shouldForceFocus"](outerButton)).toEqual(true); - - document.body.removeChild(container); - }); - - test("should invoke focusTargetOnClose function on unmount of non-modal dialogs", () => { - const mockRefocusFn: any = jest.fn(); - - const rendered: any = mount( - - ); - - rendered.unmount(); - expect(mockRefocusFn).toHaveBeenCalledTimes(1); - }); - - test("should invoke focusTargetOnClose function after unregistering 'focusin' on unmount of modal dialogs", () => { - const mockRemoveListenerFn: any = jest.fn(); - - const mockRefocusFn: any = jest.fn(); - document.removeEventListener = mockRemoveListenerFn; - const rendered: any = mount( - - ); - rendered.unmount(); - expect(mockRemoveListenerFn).toHaveBeenCalledTimes(2); - expect(mockRemoveListenerFn.mock.calls[1][0]).toBe("focusin"); - expect(mockRefocusFn).toHaveBeenCalledTimes(1); - }); - - test("should invoke focusTargetOnClose function after unregistering 'focusin' on unmount of modal dialogs", () => { - const mockRemoveListenerFn: any = jest.fn(); - - const mockRefocusFn: any = jest.fn(); - document.removeEventListener = mockRemoveListenerFn; - const rendered: any = mount( - - ); - rendered.unmount(); - expect(mockRemoveListenerFn).toHaveBeenCalledTimes(2); - expect(mockRemoveListenerFn.mock.calls[1][0]).toBe("focusin"); - expect(mockRefocusFn).toHaveBeenCalledTimes(1); - }); - - test("should focus on focus target element after unregistering 'focusin' on unmount of modal dialogs", () => { - const testButton: HTMLButtonElement = document.createElement("button"); - document.body.appendChild(testButton); - - const container: HTMLDivElement = document.createElement("div"); - document.body.appendChild(container); - - const rendered: any = mount( - - , - { attachTo: container } - ); - - expect(document.activeElement).not.toBe(testButton); - rendered.unmount(); - expect(document.activeElement).toBe(testButton); - - document.body.removeChild(testButton); - document.body.removeChild(container); - }); -}); diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.stories.tsx b/packages/react/fast-components-react-base/src/dialog/dialog.stories.tsx deleted file mode 100644 index 5341efd7852..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import { uniqueId } from "lodash-es"; -import Button from "../button"; -import Select from "../select"; -import ListboxItem from "../listbox-item"; -import Dialog from "./"; - -storiesOf("Dialog", module) - .add("Default", () => ) - .add("Modal", () => ( -
    - - - - - - - -
    - )) - .add("With width", () => ) - .add("With height", () => ) - .add("With width and height", () => ( - - )) - .add("With label", () => ) - .add("With labelledby", () => ( - -

    Dialog

    -     - )) - .add("With describedby and labelledby", () => ( - -

    Dialog

    -

    Dialog description

    -     - )) - .add("Modal with autofocus select", () => ( -
    - - - - - - - - -
    - )); diff --git a/packages/react/fast-components-react-base/src/dialog/dialog.tsx b/packages/react/fast-components-react-base/src/dialog/dialog.tsx deleted file mode 100644 index c926068df3c..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/dialog.tsx +++ /dev/null @@ -1,309 +0,0 @@ -import { DialogClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames, keyCodeEscape, keyCodeTab } from "@microsoft/fast-web-utilities"; -import { canUseDOM } from "exenv-es6"; -import React from "react"; -import { extractHtmlElement } from "@microsoft/fast-react-utilities"; -import { isFunction, isNil } from "lodash-es"; -import Tabbable from "tabbable"; -import { DisplayNamePrefix } from "../utilities"; -import { DialogHandledProps, DialogProps, DialogUnhandledProps } from "./dialog.props"; - -class Dialog extends Foundation { - public static defaultProps: Partial = { - contentHeight: "480px", - contentWidth: "640px", - visible: false, - managedClasses: {}, - }; - - public static displayName: string = `${DisplayNamePrefix}Dialog`; - - protected handledProps: HandledProps = { - describedBy: void 0, - label: void 0, - labelledBy: void 0, - contentWidth: void 0, - contentHeight: void 0, - modal: void 0, - managedClasses: void 0, - onDismiss: void 0, - visible: void 0, - focusTargetOnClose: void 0, - }; - - private rootElement: React.RefObject = React.createRef< - HTMLDivElement - >(); - - /** - * Renders the component - */ - public render(): React.ReactElement { - const { - dialog_positioningRegion, - dialog_contentRegion, - }: DialogClassNameContract = this.props.managedClasses; - - return ( -
    -
    - {this.renderModalOverlay()} -
    - {this.props.children} -
    -
    -
    - ); - } - - /** - * React life-cycle method - */ - public componentDidMount(): void { - if (canUseDOM()) { - if (this.shouldAddKeyListener(this.props)) { - document.addEventListener("keydown", this.handleDocumentKeyDown); - } - if (this.props.modal) { - document.addEventListener("focusin", this.handleDocumentFocus); - if (this.shouldForceFocus(document.activeElement)) { - this.focusOnFirstElement(); - } - } - } - } - - /** - * React life-cycle method - */ - public componentDidUpdate(prevProps: Partial): void { - if (canUseDOM()) { - if (!prevProps.modal && this.props.modal) { - document.addEventListener("focusin", this.handleDocumentFocus); - this.focusOnFirstElement(); - } else if (prevProps.modal && !this.props.modal) { - document.removeEventListener("focusin", this.handleDocumentFocus); - } - - if ( - !this.shouldAddKeyListener(prevProps) && - this.shouldAddKeyListener(this.props) - ) { - document.addEventListener("keydown", this.handleDocumentKeyDown); - } else if ( - this.shouldAddKeyListener(prevProps) && - !this.shouldAddKeyListener(this.props) - ) { - document.removeEventListener("keydown", this.handleDocumentKeyDown); - } - } - } - - /** - * React life-cycle method - */ - public componentWillUnmount(): void { - if (canUseDOM()) { - if (this.shouldAddKeyListener(this.props)) { - document.removeEventListener("keydown", this.handleDocumentKeyDown); - } - - if (this.props.modal) { - document.removeEventListener("focusin", this.handleDocumentFocus); - } - - this.invokeFocusOnCloseTarget(); - } - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames(classNames(this.props.managedClasses.dialog)); - } - - /** - * Renders the modal overlay - */ - private renderModalOverlay(): React.ReactElement { - if (!this.props.modal) { - return; - } - - return ( -
    - ); - } - - /** - * Check if props demand a key listener - */ - private shouldAddKeyListener = (props: DialogProps): boolean => { - if (props.modal || props.onDismiss) { - return true; - } - return false; - }; - - /** - * handles document key down events - */ - private handleDocumentKeyDown = (event: KeyboardEvent): void => { - if (!event.defaultPrevented && this.props.visible) { - switch (event.keyCode) { - case keyCodeEscape: - this.checkForSoftDismiss(event); - break; - - case keyCodeTab: - this.handleTabKeyDown(event); - break; - } - } - }; - - /** - * Invokes dialog soft dismiss if appropriate - */ - private checkForSoftDismiss = ( - event: KeyboardEvent | React.MouseEvent | React.TouchEvent - ): void => { - if ( - this.props.onDismiss && - typeof this.props.onDismiss === "function" && - this.props.visible - ) { - this.props.onDismiss(event); - } - }; - - /** - * process tab key down events - */ - private handleTabKeyDown = (event: KeyboardEvent): void => { - if (!this.props.modal) { - // only handle tab keystrokes when modal - return; - } - const tabbableElements: HTMLElement[] = Tabbable(this.rootElement.current); - const tabbableElementCount: number = tabbableElements.length; - if (tabbableElementCount === 0) { - this.tryFocusOnRootElement(); - event.preventDefault(); - return; - } - // intervene in normal tab order for first and last items in list - if (event.shiftKey && event.target === tabbableElements[0]) { - tabbableElements[tabbableElementCount - 1].focus(); - event.preventDefault(); - } else if ( - !event.shiftKey && - event.target === tabbableElements[tabbableElementCount - 1] - ) { - tabbableElements[0].focus(); - event.preventDefault(); - } - }; - - /** - * forces focus to first tabbable element of modal dialog if document gains focus while dialog is open - */ - private handleDocumentFocus = (event: FocusEvent): void => { - if ( - !event.defaultPrevented && - this.shouldForceFocus(event.target as HTMLElement) - ) { - this.focusOnFirstElement(); - event.preventDefault(); - } - }; - - /** - * test to avoid forcing focus when focus is already within - */ - private shouldForceFocus = (currentFocusElement: Element): boolean => { - return ( - this.props.visible && - this.rootElement.current instanceof HTMLElement && - !(this.rootElement.current as HTMLElement).contains(currentFocusElement) - ); - }; - - /** - * focus on first element of tab queue - */ - private focusOnFirstElement = (): void => { - if (canUseDOM() && this.rootElement.current instanceof HTMLElement) { - const tabbableElements: HTMLElement[] = Tabbable(this.rootElement.current); - if (tabbableElements.length === 0) { - this.tryFocusOnRootElement(); - } else { - tabbableElements[0].focus(); - } - } - }; - - /** - * if no tabbable elements try to focus root element - * generally a modal dialog should be expected to have a focusable element - */ - private tryFocusOnRootElement = (): void => { - if (this.rootElement.current instanceof HTMLElement) { - this.rootElement.current.focus(); - } - }; - - /** - * Act on focusTargetOnClose prop when component unmounts - */ - private invokeFocusOnCloseTarget = (): void => { - if (isNil(this.props.focusTargetOnClose)) { - return; - } - - if (isFunction(this.props.focusTargetOnClose)) { - this.props.focusTargetOnClose(); - return; - } - - const targetElement: HTMLElement | Text = extractHtmlElement( - this.props.focusTargetOnClose - ); - - if (targetElement instanceof HTMLElement) { - targetElement.focus(); - } - }; -} - -export default Dialog; -export * from "./dialog.props"; -export { DialogClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/dialog/index.ts b/packages/react/fast-components-react-base/src/dialog/index.ts deleted file mode 100644 index 6945a5cba58..00000000000 --- a/packages/react/fast-components-react-base/src/dialog/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Dialog from "./dialog"; -import dialogSchema from "./dialog.schema"; -import dialogSchema2 from "./dialog.schema.2"; - -export { dialogSchema, dialogSchema2 }; -export default Dialog; -export * from "./dialog"; diff --git a/packages/react/fast-components-react-base/src/divider/README.md b/packages/react/fast-components-react-base/src/divider/README.md deleted file mode 100644 index 1db0fb950b4..00000000000 --- a/packages/react/fast-components-react-base/src/divider/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Divider -The *divider* component defines a thematic break or shift of topic within a page. It is based on the standard [hr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) element. - -## Accessibility -The *divider* is intrinsically set as `role="separator"`, and therefore is not necessary to explicitly define this role. Apply `role="presentation"` when usage involves changing the look of the page but does not have all the functional, interactive, or structural relevance implied by the `hr` element. Learn more from [W3C Recommendations](https://www.w3.org/TR/html5/grouping-content.html#the-hr-element). \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/divider/divider.props.ts b/packages/react/fast-components-react-base/src/divider/divider.props.ts deleted file mode 100644 index 27f0a102f73..00000000000 --- a/packages/react/fast-components-react-base/src/divider/divider.props.ts +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import { - DividerClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * Divider HTML Roles - */ -export enum DividerRoles { - presentation = "presentation", - separator = "separator", -} - -export type DividerManagedClasses = ManagedClasses; -export type DividerUnhandledProps = Omit, "role">; -export interface DividerHandledProps extends DividerManagedClasses { - /** - * The HTML role attribute - */ - role?: DividerRoles; -} - -export type DividerProps = DividerHandledProps & DividerUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/divider/divider.schema.ts b/packages/react/fast-components-react-base/src/divider/divider.schema.ts deleted file mode 100644 index f869f5090f1..00000000000 --- a/packages/react/fast-components-react-base/src/divider/divider.schema.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default { - $schema: "http://json-schema.org/schema#", - title: "Divider", - description: "A divider component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/divider", - formPluginId: "@microsoft/fast-components-react-base/divider", - properties: { - role: { - title: "HTML role attribute", - type: "string", - enum: ["presentation", "separator"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/divider/divider.spec.tsx b/packages/react/fast-components-react-base/src/divider/divider.spec.tsx deleted file mode 100644 index 4b0d9ac6ea5..00000000000 --- a/packages/react/fast-components-react-base/src/divider/divider.spec.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow, ShallowWrapper } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Divider, { - DividerClassNameContract, - DividerHandledProps, - DividerProps, - DividerRoles, - DividerUnhandledProps, -} from "./divider"; - -configure({ adapter: new Adapter() }); - -describe("divider", (): void => { - const managedClasses: DividerClassNameContract = { - divider: "divider-class", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Divider as any).name}`).toBe(Divider.displayName); - }); - - test("should have correct root element type 'hr'", () => { - const rendered: ShallowWrapper = shallow(); - expect(rendered.type()).toBe("hr"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should return an object that includes all valid props which are not enumerated as handledProps", () => { - const handledProps: DividerHandledProps = { - managedClasses, - }; - const unhandledProps: DividerUnhandledProps = { - "aria-hidden": true, - }; - const props: DividerProps = { ...handledProps, ...unhandledProps }; - const rendered: any = shallow(); - - expect(rendered.prop("aria-hidden")).not.toBe(undefined); - expect(rendered.prop("aria-hidden")).toEqual(true); - }); - - test("should pass `role` prop when value is `presentation`", () => { - const rendered: any = shallow( - - ); - - expect(rendered.prop("role")).toEqual(DividerRoles.presentation); - }); - - test("should NOT have a role attribute when value is `separator`", () => { - const rendered: any = shallow( - - ); - - expect(rendered.prop("role")).not.toEqual(DividerRoles.separator); - expect(rendered.prop("role")).toBe(undefined); - }); -}); diff --git a/packages/react/fast-components-react-base/src/divider/divider.stories.tsx b/packages/react/fast-components-react-base/src/divider/divider.stories.tsx deleted file mode 100644 index 40a4dd8da47..00000000000 --- a/packages/react/fast-components-react-base/src/divider/divider.stories.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import { DividerRoles } from "./divider.props"; -import Divider from "./"; - -storiesOf("Divider", module) - .add("Divider", () => ) - .add("Divider with role seperator", () => ) - .add("Divider with role presentation", () => ( - - )); diff --git a/packages/react/fast-components-react-base/src/divider/divider.tsx b/packages/react/fast-components-react-base/src/divider/divider.tsx deleted file mode 100644 index d6efad349b3..00000000000 --- a/packages/react/fast-components-react-base/src/divider/divider.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { DividerClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { - DividerHandledProps, - DividerProps, - DividerRoles, - DividerUnhandledProps, -} from "./divider.props"; - -class Divider extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Divider`; - - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - managedClasses: void 0, - role: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( -
    - ); - } - - /** - * Generates the attributes - */ - protected generateAttributes(): React.HTMLAttributes { - // Do not render role="separator" on page because it's intrinsically set. - if (this.props.role && this.props.role !== DividerRoles.separator) { - return { role: DividerRoles[this.props.role] }; - } - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames(classNames(this.props.managedClasses.divider)); - } -} - -export default Divider; -export * from "./divider.props"; -export { DividerClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/divider/docs.md b/packages/react/fast-components-react-base/src/divider/docs.md deleted file mode 100644 index af857a71e55..00000000000 --- a/packages/react/fast-components-react-base/src/divider/docs.md +++ /dev/null @@ -1,8 +0,0 @@ -## Best practices -Use the *divider* to show a change in the content between two blocks of information. The content surrounding the *divider* determine the spacing above and below it. For example, headings of differing importance require different spacing above them, but it is possible to apply spacing preselects for space above and/or below the *divider*. - -### Usage guidance -Use *divider* to separate sections that may not otherwise have a clear beginning or end, and to separate information blocks where the context or continuity changes between the blocks. - -## Accessibility -The *divider* is intrinsically set as `role="separator"`, so it's not necessary to include when the *divider* separates and distinguishes sections of content. However, when changing the look, functional, interactive, or structural relevance implied by the `hr` element a `role="presentation"` may be applied. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/divider/index.ts b/packages/react/fast-components-react-base/src/divider/index.ts deleted file mode 100644 index e216d057a4a..00000000000 --- a/packages/react/fast-components-react-base/src/divider/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Divider from "./divider"; -import dividerSchema from "./divider.schema"; - -export { dividerSchema }; -export default Divider; -export * from "./divider"; diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/README.md b/packages/react/fast-components-react-base/src/horizontal-overflow/README.md deleted file mode 100644 index ed3fb704792..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# Horizontal overflow -The *horizontal overflow* component accepts items as children. A child can have an optional *slot* property which is either "next" or "previous" which can be used to allow the next/previous click actions. *Horizontal overflow* uses native scrolling behavior. - -### Usage guidance -The *horizontal overflow* component always initializes at the start of the overflow content — left side in LTR and right side in RTL. Several callbacks are supplied to provide the consumer with overflow and scroll data. The not fully supported [ResizeObserver](https://developers.google.com/web/updates/2016/10/resizeobserver) is used (supported in Chrome), so it is necessary to apply a polyfill if more thorough browser support is needed (Safari and Firefox). Full adaptation is expected soon. - -The "onOverflowChange" callback is provided to enable developers to react to changes in overflow. The returned "OverflowChange" object describes overflow as follows: - - When both "overflowStart" and "overflowEnd" are `false`, there is no overflow - - When both are `true`, there is overflow on either side - - 'overflowStart' is `true` when there are items to the left in LTR (right in RTL) - - 'overflowEnd' is `true` when there are items to the right in LTR (left in RTL) - - The "onScrollChange" callback is deprecated and should be avoided, use "onOverflowChange" instead. - - The "scrollDuration" prop enables authors to specify a custom duration for scroll animations in milliseconds. Default is 500ms. - - The "nextItemPeek" prop defines how many pixels of the next or previous item is partially visible when the component scrolls content. The default value is 50 pixels. The component only provides this peek if there is enough room to accommodate the currently focused item. - -## Accessibility -The 'next' and 'previous' buttons are only useful for sighted users, since overflow is a purely visual construct, so they should be hidden from screen readers. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.node.spec.tsx b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.node.spec.tsx deleted file mode 100644 index 95ab22563de..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.node.spec.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @jest-environment node - */ -import "jsdom-global/register"; - -import React from "react"; -import ReactDOMServer from "react-dom/server"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, ReactWrapper } from "enzyme"; -import HorizontalOverflow, { HorizontalOverflowClassNameContract } from "./"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -const imageSet1: JSX.Element[] = [ - , - , - , - , - , - , -]; - -const managedClasses: HorizontalOverflowClassNameContract = { - horizontalOverflow: "horizontal-overflow-class", - horizontalOverflow_contentRegion: "horizontal-overflow-items-class", - horizontalOverflow_item: "horizontal-overflow-item-class", - horizontalOverflow_next: "horizontal-overflow-next-class", - horizontalOverflow_previous: "horizontal-overflow-previous-class", -}; - -describe("horizontal overflow server-side", (): void => { - test("should render in a node environment without throwing an error", () => { - const renderedWithImagesAndNextAndPrevious: ReactWrapper = mount( - - - - {imageSet1} - - ); - - expect(renderedWithImagesAndNextAndPrevious).not.toBe(undefined); - }); - test("should render to string for server side rendering", () => { - const renderedWithImagesAndNextAndPrevious: string = ReactDOMServer.renderToString( - - - - {imageSet1} - - ); - - expect(renderedWithImagesAndNextAndPrevious).toEqual( - '
    ' - ); - }); -}); diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.props.ts b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.props.ts deleted file mode 100644 index 74acf87dc19..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.props.ts +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { - HorizontalOverflowClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -/** - * Scroll interface for consumers - * 'start' is when the horizontal overflow scroll is all the way left in LTR (all the way right in RTL) - * 'end' is when the horizontal overflow scroll is all the right in LTR (all the way left in RTL) - * TODO #1177: Change interface property names to be more meaningful - */ -export interface PositionChange { - start: boolean; - end: boolean; -} - -/** - * ScrollChange - * @deprecated - * TODO #1178: Remove deprecated interface on next major bump - */ -export type ScrollChange = PositionChange; - -/** - * Overflow interface for consumers - * When both are false, there is no overflow - * When both are true, there is overflow on either side - * 'overflowStart' is true when there are items to the left in LTR (right in RTL) - * 'overflowEnd' is true when there are items to the right in LTR (left in RTL) - */ -export interface OverflowChange { - overflowStart: boolean; - overflowEnd: boolean; -} - -export type HorizontalOverflowUnhandledProps = React.HTMLAttributes; -export type HorizontalOverflowManagedClasses = ManagedClasses< - HorizontalOverflowClassNameContract ->; -export interface HorizontalOverflowHandledProps extends HorizontalOverflowManagedClasses { - /** - * The horizontal overflow content - */ - children?: React.ReactNode | React.ReactNode[]; - - /** - * The duration the scroll movement should last - */ - scrollDuration?: number; - - /** - * Callback for on overflow change - * Use `onOverflowChange` to know if there are enough items to cause overflow, and where the overflow occurs - */ - onOverflowChange?: (overflowObject: OverflowChange) => void; - - /** - * Callback for on scroll change - * Use `onScrollChange` to receive if scroll is at the start or end of the overflow set - */ - onScrollChange?: (scrollObject: PositionChange) => void; - - /** - * When the component scrolls focused content into view how many pixels should the next item "peek" into view - * Default is 50. Note that peek values that are too small can result in browsers rapidly moving focused items into - * view and skipping the scroll animation - */ - nextItemPeek?: number; - - /** - * Set the horizontal overflow to a fixed height instead of sizing to the largest child item. - * Useful when server side rendering to ensure server and client DOM matching. - */ - fixedHeight?: number | null; -} - -export type HorizontalOverflowProps = HorizontalOverflowHandledProps & - HorizontalOverflowUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.2.ts b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.2.ts deleted file mode 100644 index 8c0adf557ea..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.2.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Horizontal overflow", - description: "A horizontal overflow component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/horizontal-overflow", - formPluginId: "@microsoft/fast-components-react-base/horizontal-overflow", - properties: { - scrollDuration: { - title: "Scroll duration", - type: "number", - }, - nextItemPeek: { - title: "Next item peek", - type: "number", - }, - children: { - ...linkedDataSchema, - formPluginId: - "@microsoft/fast-components-react-base/horizontal-overflow/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.ts b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.ts deleted file mode 100644 index f68f3682769..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.schema.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Horizontal overflow", - description: "A horizontal overflow component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/horizontal-overflow", - formPluginId: "@microsoft/fast-components-react-base/horizontal-overflow", - properties: { - scrollDuration: { - title: "Scroll duration", - type: "number", - }, - nextItemPeek: { - title: "Next item peek", - type: "number", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: - "@microsoft/fast-components-react-base/horizontal-overflow/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.spec.tsx b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.spec.tsx deleted file mode 100644 index 85a8b6d273b..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.spec.tsx +++ /dev/null @@ -1,876 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import rafThrottle from "raf-throttle"; -import { ConstructibleResizeObserver, DisplayNamePrefix } from "../utilities"; -import HorizontalOverflow, { - ButtonDirection, - HorizontalOverflowClassNameContract, -} from "./"; -import "raf/polyfill"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -const id1: string = "image1"; -const id2: string = "image2"; -const id3: string = "image3"; -const id4: string = "image4"; -const id5: string = "image5"; -const id6: string = "image6"; -const id7: string = "image7"; -const id8: string = "image8"; -const id9: string = "image9"; -const id10: string = "image10"; -const id11: string = "image11"; -const id12: string = "image12"; - -const imageSet1: JSX.Element[] = [ - , - , - , - , - , - , -]; - -const imageSet2: JSX.Element[] = [ - , - , - , - , - , - , -]; - -const managedClasses: HorizontalOverflowClassNameContract = { - horizontalOverflow: "horizontal-overflow-class", - horizontalOverflow_contentRegion: "horizontal-overflow-items-class", - horizontalOverflow_item: "horizontal-overflow-item", - horizontalOverflow_next: "horizontal-overflow-next-class", - horizontalOverflow_previous: "horizontal-overflow-previous-class", -}; - -// TODO #746: https://github.com/Microsoft/fast/issues/746 - -describe("horizontal overflow", (): void => { - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(HorizontalOverflow as any).name}`).toBe( - HorizontalOverflow.displayName - ); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should trigger a snapshot when children have been added", () => { - const callback: any = jest.fn(); - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.find("li")).toHaveLength(6); - expect(callback).toHaveBeenCalledTimes(0); - - renderedWithImages.setProps({ children: imageSet1.concat(imageSet2) }); - - expect(renderedWithImages.find("li")).toHaveLength(12); - expect(callback).toHaveBeenCalledTimes(1); - }); - - test("should be a list of items which contain each item", () => { - const renderedWithImagesAndPrevious: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImagesAndPrevious.find("ul").length).toBe(1); - expect(renderedWithImagesAndPrevious.find("li").length).toBe(6); - expect( - renderedWithImagesAndPrevious.find("li").at(0).find("img").prop("id") - ).toBe(id1); - expect( - renderedWithImagesAndPrevious.find("li").at(1).find("img").prop("id") - ).toBe(id2); - expect( - renderedWithImagesAndPrevious.find("li").at(2).find("img").prop("id") - ).toBe(id3); - expect( - renderedWithImagesAndPrevious.find("li").at(3).find("img").prop("id") - ).toBe(id4); - expect( - renderedWithImagesAndPrevious.find("li").at(4).find("img").prop("id") - ).toBe(id5); - expect( - renderedWithImagesAndPrevious.find("li").at(5).find("img").prop("id") - ).toBe(id6); - }); - - test("should add a style of `display: inline-block` to the list item containing each item", () => { - const rendered: any = mount( - - {imageSet1} - - ); - - expect(rendered.find("li").at(0).props().style).toEqual({ - display: "inline-block", - }); - }); - - test("should render a previous button if one is passed as a child with the appropriate slot prop", () => { - const renderedWithImagesAndPrevious: any = mount( - - - {imageSet1} - - ); - - expect(renderedWithImagesAndPrevious.find("#testButtonPrevious")).not.toBe( - undefined - ); - }); - test("should render a next button if one is passed as a child with the appropriate slot prop", () => { - const renderedWithImagesAndNext: any = mount( - - - {imageSet1} - - ); - - expect(renderedWithImagesAndNext.find("#testButtonNext")).not.toBe(undefined); - }); - test("should render a series of items if they are passed as children", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.find("img").length).toBe(6); - }); - test("should not set `itemHeight` if no children have been passed or fixedHeight set", () => { - const rendered: any = mount( - - ); - - expect(rendered.state("itemsHeight")).toBe(null); - }); - test("should set `itemHeight` to the fixedHeight if no children have been passed but a fixedHeight has been set", () => { - const rendered: any = mount( - - ); - - expect(rendered.state("itemsHeight")).toBe(100); - }); - test("should set `itemHeight` to the fixedHeight if children have been passed and a fixedHeight has been set", () => { - const rendered: any = mount( - - - - ); - - expect(rendered.state("itemsHeight")).toBe(100); - }); - test("should update the rendering of a series of items if they are modified", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.find("img").length).toBe(6); - - renderedWithImages.setProps({ - children: [ - , - , - ], - }); - - expect(renderedWithImages.find("img").length).toBe(2); - }); - test("should update the scrolled distance when moving next to include the next number of items that can be in view", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - renderedWithImages.instance()["getAvailableWidth"] = (): number => 50; - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 70; - renderedWithImages.instance()["getScrollPeek"] = (): number => 0; - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.next, - [10, 20, 20, 50, 20], - 0 - ) - ).toBe(50); - - // reaches the max distance and uses that instead - renderedWithImages.instance()["getAvailableWidth"] = (): number => 40; - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 60; - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.next, - [10, 20, 10, 30, 20, 10], - 30 - ) - ).toBe(60); - - renderedWithImages.instance()["getAvailableWidth"] = (): number => 40; - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 90; - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.next, - [10, 20, 10, 30, 20, 10, 20, 10], - 30 - ) - ).toBe(70); - - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.next, - [10, 20, 10, 30, 20, 10, 20, 10], - 40 - ) - ).toBe(70); - }); - - test("should update the scrolled distance when moving next in round numbers", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - renderedWithImages.instance()["getAvailableWidth"] = (): number => 50; - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 71; - renderedWithImages.instance()["getScrollPeek"] = (): number => 0; - - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.next, - [10.01, 20.3, 20.5, 50.2, 20.9], - 0 - ) - ).toBe(31); - }); - - test("should update the scrolled distance when moving previous to include the previous number of items that can be in view", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - renderedWithImages.instance()["getAvailableWidth"] = (): number => 50; - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 70; - renderedWithImages.instance()["getScrollPeek"] = (): number => 0; - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.previous, - [10, 20, 20, 50, 20], - 10 - ) - ).toBe(0); - - renderedWithImages.instance()["getMaxScrollDistance"] = (): number => 150; - expect( - renderedWithImages - .instance() - ["getScrollDistanceFromButtonDirection"]( - ButtonDirection.previous, - [50, 50, 50, 50], - 100 - ) - ).toBe(50); - }); - test("should an state property `itemsHeight`", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.state("itemsHeight")).toBe(0); - expect(renderedWithImages.instance()["getItemMaxHeight"]()).toBe(0); - }); - test("should ease the animation correctly when moving the scroll position", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.instance()["easeInOutQuad"](1, 0, 0.5, 50)).toBe( - 0.0004 - ); - }); - test("should ease the animation correctly when at animation start time", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.instance()["easeInOutQuad"](0, 0, 0.5, 50)).toBe(0); - }); - test("should ease the animation correctly when at animation end time", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.instance()["easeInOutQuad"](50, 0, 0.5, 50)).toBe(0.5); - }); - test("getScrollAnimationPosition returns correct start and end values", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - renderedWithImages.instance().currentScrollAnimStartPosition = 0; - renderedWithImages.instance().currentScrollAnimEndPosition = 100; - - expect(renderedWithImages.instance()["getScrollAnimationPosition"](0, 1000)).toBe( - 0 - ); - expect( - renderedWithImages.instance()["getScrollAnimationPosition"](1000, 1000) - ).toBe(100); - }); - test("should get the distance when moving next/previous", () => { - const renderedWithImagesAndNextAndPrevious: any = mount( - - - - {imageSet1} - - ); - - renderedWithImagesAndNextAndPrevious.instance()[ - "getAvailableWidth" - ] = (): number => 500; - renderedWithImagesAndNextAndPrevious.instance()[ - "getMaxScrollDistance" - ] = (): number => 1600; - renderedWithImagesAndNextAndPrevious.instance()["getScrollPeek"] = (): number => - 0; - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getNextDistance"]( - [120, 140, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 0 - ) - ).toBe(340); - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getNextDistance"]( - [120, 140, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 2100 - ) - ).toBe(2100); - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getPreviousDistance"]( - [120, 140, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 560 - ) - ).toBe(120); - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getPreviousDistance"]( - [120, 140, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 0 - ) - ).toBe(0); - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getScrollDistanceFromButtonDirection"]("next", [], 0) - ).toBe(0); - }); - test("getNextDistance should not get hung up on elements wider than the viewport", () => { - const renderedWithImagesAndNextAndPrevious: any = mount( - - - - {imageSet1} - - ); - - renderedWithImagesAndNextAndPrevious.instance()["getScrollPeek"] = (): number => - 0; - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getNextDistance"]( - [120, 1400, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 120 - ) - ).toBe(1520); - }); - test("getPreviousDistance should not get hung up on elements wider than the viewport", () => { - const renderedWithImagesAndNextAndPrevious: any = mount( - - - - {imageSet1} - - ); - - renderedWithImagesAndNextAndPrevious.instance()[ - "getAvailableWidth" - ] = (): number => 500; - renderedWithImagesAndNextAndPrevious.instance()[ - "getMaxScrollDistance" - ] = (): number => 2860; - renderedWithImagesAndNextAndPrevious.instance()["getScrollPeek"] = (): number => - 0; - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getPreviousDistance"]( - [120, 1400, 80, 220, 210, 100, 90, 200, 190, 170, 180, 210, 190], - 1520 - ) - ).toBe(120); - }); - test("should set a max/min distance without additional calculations", () => { - const renderedWithImagesAndNextAndPrevious: any = mount( - - - - {imageSet1} - - ); - - renderedWithImagesAndNextAndPrevious.instance()[ - "getAvailableWidth" - ] = (): number => 500; - renderedWithImagesAndNextAndPrevious.instance()[ - "getMaxScrollDistance" - ] = (): number => 400; - renderedWithImagesAndNextAndPrevious.instance()["getScrollPeek"] = (): number => - 0; - - expect( - renderedWithImagesAndNextAndPrevious - .instance() - ["getWithinMaxDistance"](400, []) - ).toBe(400); - - expect( - renderedWithImagesAndNextAndPrevious.instance()["getWithinMinDistance"](0, []) - ).toBe(0); - }); - test("should have an `onLoad` method", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.instance()["itemsOnLoad"]()).toBe(undefined); - - expect(renderedWithImages.instance().state.itemsHeight).toBe(0); - - renderedWithImages.setState({ itemsHeight: 50 }); - - expect(renderedWithImages.instance().state.itemsHeight).toBe(50); - - renderedWithImages.find("div.foo").simulate("load", {}); - - expect(renderedWithImages.instance().state.itemsHeight).toBe(0); - }); - test("should execute a scroll animation on the element", () => { - const renderedWithImages: any = mount( - - {imageSet1} - - ); - - expect(renderedWithImages.instance()["scrollContent"](50, 0)).toBe(undefined); - }); - test("should allow clicks on previous and next buttons", () => { - const renderedWithImagesAndNextAndPrevious: any = mount( - - - - {imageSet1} - - ); - - expect(renderedWithImagesAndNextAndPrevious.instance()["handleNextClick"]()).toBe( - undefined - ); - - expect( - renderedWithImagesAndNextAndPrevious.instance()["handlePreviousClick"]() - ).toBe(undefined); - }); - test("should add resize event listener to the window", (): void => { - const map: any = {}; - const resizeCallback: any = jest.fn(); - - // Mock window.removeEventListener - window.addEventListener = jest.fn((event: string, callback: any) => { - // if an event is added for resize, add a callback to mock - if (event === "resize") { - callback = resizeCallback; - } - - map[event] = callback; - }); - - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: any = mount( - - {imageSet1} - - ); - - map.resize(); - - expect(resizeCallback).toHaveBeenCalledTimes(1); - expect(window.addEventListener).toHaveBeenCalled(); - }); - test("should remove a resize event listener from the window when component unmounts", (): void => { - const map: any = {}; - const resizeCallback: any = jest.fn(); - - // Mock window.removeEventListener - window.removeEventListener = jest.fn((event: string, callback: any) => { - // if an event is added for resize, add a callback to mock - if (event === "resize") { - callback = resizeCallback; - } - - map[event] = callback; - }); - - const rendered: any = mount( - - {imageSet1} - - ); - - rendered.unmount(); - - map.resize(); - - expect(resizeCallback).toHaveBeenCalledTimes(1); - expect(window.removeEventListener).toHaveBeenCalled(); - expect(resizeCallback.mock.calls[0][0]).not.toBe("resize"); - }); - test("should create a resize observer if it is available", (): void => { - const ActualObserver: ConstructibleResizeObserver = ((window as unknown) as WindowWithResizeObserver) - .ResizeObserver; - const construct: jest.Mock = jest.fn(); - // Mock the resize observer - class MockObserver { - public observe: jest.Mock = jest.fn(); - public unobserve: jest.Mock = jest.fn(); - public disconnect: jest.Mock = jest.fn(); - constructor() { - construct(); - } - } - ((window as unknown) as WindowWithResizeObserver).ResizeObserver = MockObserver; - - // Render the component - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const rendered: any = mount( - - {imageSet1} - - ); - - expect(construct).toBeCalledTimes(1); - // Replace the window to it's original state - ((window as unknown) as WindowWithResizeObserver).ResizeObserver = ActualObserver; - }); - test("should disconnect the resize observer when unmounted", (): void => { - const ActualObserver: ConstructibleResizeObserver = ((window as unknown) as WindowWithResizeObserver) - .ResizeObserver; - const disconnect: jest.Mock = jest.fn(); - // Mock the resize observer - - class MockObserver { - public observe: jest.Mock = jest.fn(); - public unobserve: jest.Mock = jest.fn(); - public disconnect: jest.Mock = disconnect; - } - ((window as unknown) as WindowWithResizeObserver).ResizeObserver = MockObserver; - - const rendered: any = mount( - - {imageSet1} - - ); - // Unmount the component to trigger lifecycle methods - rendered.unmount(); - - expect(disconnect).toBeCalledTimes(1); - // Replace the window to it's original state - ((window as unknown) as WindowWithResizeObserver).ResizeObserver = ActualObserver; - }); - test("should cancel any queued callbacks on unmount", (): void => { - const actualRafThrottle: typeof rafThrottle = rafThrottle; - const cancel: jest.Mock = jest.fn(); - (rafThrottle as typeof rafThrottle) = jest.fn((): any => { - const throttled: any = jest.fn(); - throttled.cancel = cancel; - return throttled; - }); - - const rendered: any = mount( - - {imageSet1} - - ); - // Unmount the component to trigger lifecycle methods - rendered.unmount(); - - // Once for the resize callback and once for the scroll callback - expect(cancel).toHaveBeenCalledTimes(2); - - (rafThrottle as any) = actualRafThrottle; - }); - test("getPositionData returns correct value when scrolled to beginning", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - - rendered.instance().horizontalOverflowItemsRef.current = { - scrollWidth: 200, - clientWidth: 100, - scrollLeft: 0, - }; - expect(rendered.instance()["getPositionData"]()).toEqual({ - start: true, - end: false, - }); - }); - test("getPositionData returns correct value when scrolled to middle", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - - rendered.instance().horizontalOverflowItemsRef.current = { - scrollWidth: 200, - clientWidth: 100, - scrollLeft: 50, - }; - expect(rendered.instance()["getPositionData"]()).toEqual({ - start: false, - end: false, - }); - }); - test("getPositionData returns correct value when scrolled to the end", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - - rendered.instance().horizontalOverflowItemsRef.current = { - scrollWidth: 200, - clientWidth: 100, - scrollLeft: 100, - }; - expect(rendered.instance()["getPositionData"]()).toEqual({ - start: false, - end: true, - }); - }); - test("getPositionData returns correct value when container does not scroll", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - - rendered.instance().horizontalOverflowItemsRef.current = { - scrollWidth: 100, - clientWidth: 100, - scrollLeft: 0, - }; - expect(rendered.instance()["getPositionData"]()).toEqual({ - start: true, - end: true, - }); - }); - test("getDirection returns correct value when set to ltr", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getDirection"]()).toEqual("ltr"); - }); - test("getDirection returns correct value when set to rtl", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getDirection"]()).toEqual("rtl"); - }); - test("settting and getting scroll position works correctly in ltr", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getScrollPosition"]()).toEqual(0); - rendered.instance()["setScrollPosition"](100); - expect(rendered.instance()["getScrollPosition"]()).toEqual(100); - }); - test("settting and getting scroll position works correctly in rtl", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getScrollPosition"]()).toEqual(-0); - rendered.instance()["setScrollPosition"](100); - expect(rendered.instance()["getScrollPosition"]()).toEqual(100); - }); - test("getting and setting scroll position returns 0 when horizontalOverflowItemsRef isn't populated ", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - rendered.instance().horizontalOverflowItemsRef.current = null; - expect(rendered.instance()["getScrollPosition"]()).toEqual(0); - rendered.instance()["setScrollPosition"](100); - expect(rendered.instance()["getScrollPosition"]()).toEqual(0); - }); - test("getDirection should return direction value when the ltr prop is passed", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getDirection"]()).toEqual("ltr"); - }); - test("getDirection should return direction value when the rtl prop is passed", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance()["getDirection"]()).toEqual("rtl"); - }); - test("getDirection should return direction ltr when current ref is invalid", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - rendered.instance().horizontalOverflowItemsRef.current = null; - expect(rendered.instance()["getDirection"]()).toEqual("ltr"); - }); - test("updateScrollAnimation marks scrollAnimating as complete when time reaches duration", (): void => { - const rendered: any = mount( - - {imageSet1} - - ); - - let currentTime: number = new Date().getTime(); - rendered.instance().currentScrollAnimStartTime = currentTime; - rendered.instance().isScrollAnimating = true; - const targetDelayTime: number = currentTime + 500; - while (currentTime < targetDelayTime) { - currentTime = new Date().getTime(); - } - rendered.instance()["updateScrollAnimation"](); - expect(rendered.instance().isScrollAnimating).toEqual(false); - }); - test("scrollContent properly configures a smooth scrolling animation", () => { - const maxScrollFn: any = jest.fn(); - maxScrollFn.mockReturnValue(1000); - - const rendered: any = mount( - - {imageSet1} - - ); - expect(rendered.instance().isScrollAnimating).toEqual(false); - rendered.instance().getMaxScrollDistance = maxScrollFn; - rendered.instance().requestFrame = jest.fn(); - rendered.instance()["scrollContent"](0, 100); - expect(rendered.instance().isScrollAnimating).toEqual(true); - expect(rendered.instance().currentScrollAnimStartPosition).toEqual(0); - expect(rendered.instance().currentScrollAnimEndPosition).toEqual(100); - }); -}); diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.stories.tsx b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.stories.tsx deleted file mode 100644 index 0ccd1d3d2bd..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.stories.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import { action } from "@storybook/addon-actions"; -import Button from "../button"; -import Image from "../image"; -import HorizontalOverflow, { OverflowChange } from "./"; - -const images: JSX.Element[] = [ - "https://placehold.it/120x100/414141/?text=1", - "https://placehold.it/180x100?text=2", - "https://placehold.it/240x100/414141/?text=3", - "https://placehold.it/120x100?text=4", - "https://placehold.it/840x100/414141/?text=5", - "https://placehold.it/200x100?text=6", - "https://placehold.it/220x100/414141/?text=7", - "https://placehold.it/170x100?text=8", - "https://placehold.it/160x100/414141/?text=9", - "https://placehold.it/240x100?text=10", - "https://placehold.it/110x100/414141/?text=11", - "https://placehold.it/270x100?text=12", -].map( - (src: string): JSX.Element => { - return Placeholder image; - } -); - -interface TestOverflowState { - overflowStart: boolean; - overflowEnd: boolean; -} - -class TestOverflow extends React.Component<{}, TestOverflowState> { - private rootElement: React.RefObject = React.createRef< - HTMLDivElement - >(); - - constructor(props: {}) { - super(props); - - this.state = { - overflowStart: false, - overflowEnd: false, - }; - } - - public render(): JSX.Element { - return ( - - {this.props.children} - {this.state.overflowStart && } - {this.state.overflowEnd && } - - ); - } - - private setOverflowState = (overflow: OverflowChange): void => { - this.setState({ - overflowStart: overflow.overflowStart, - overflowEnd: overflow.overflowEnd, - }); - }; -} - -storiesOf("Horizontal overflow", module) - .add("Default", () => ( - - - - {images} - - )) - .add("Custom scroll duration", () => ( -
    - - - - {images} - -
    - )) - .add("RTL ", () => ( -
    - {images} -
    - )) - .add("With buttons", () => ( - - - - - - - - - - - - - - - )); diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.tsx b/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.tsx deleted file mode 100644 index 0c479e94cd4..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/horizontal-overflow.tsx +++ /dev/null @@ -1,851 +0,0 @@ -import { HorizontalOverflowClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { - classNames, - Direction, - getClientRectWithMargin, - RtlScrollConverter, -} from "@microsoft/fast-web-utilities"; -import { canUseDOM } from "exenv-es6"; -import { get, isNil } from "lodash-es"; -import throttle from "raf-throttle"; -import React from "react"; -import { - DisplayNamePrefix, - ResizeObserverClassDefinition, - ResizeObserverEntry, -} from "../utilities"; -import { - HorizontalOverflowHandledProps, - HorizontalOverflowProps, - HorizontalOverflowUnhandledProps, - PositionChange, -} from "./horizontal-overflow.props"; - -export enum ButtonDirection { - previous = "previous", - next = "next", -} - -export interface HorizontalOverflowState { - itemsHeight: number | null; - direction: Direction; -} - -class HorizontalOverflow extends Foundation< - HorizontalOverflowHandledProps, - HorizontalOverflowUnhandledProps, - HorizontalOverflowState -> { - public static displayName: string = `${DisplayNamePrefix}HorizontalOverflow`; - - public static defaultProps: Partial = { - managedClasses: {}, - nextItemPeek: 50, - fixedHeight: null, - }; - private static DirectionAttributeName: string = "dir"; - private static defaultScrollAnimationDuration: number = 500; - - protected handledProps: HandledProps = { - scrollDuration: void 0, - managedClasses: void 0, - onScrollChange: void 0, - onOverflowChange: void 0, - nextItemPeek: void 0, - fixedHeight: void 0, - }; - - private horizontalOverflowItemsRef: React.RefObject; - - /** - * Throttle scroll request animation frame usage - */ - private throttledScroll: throttle; - - /** - * Throttle resize request animation frame usage - */ - private throttledResize: throttle; - - /** - * Stores the overall overflow status - */ - private overflow: boolean; - - /** - * Stores the overallStart status - */ - private overflowStart: boolean; - - /** - * Stores the overallEnd status - */ - private overflowEnd: boolean; - - /** - * Store a reference to a constructed resize observer - */ - private resizeObserver?: ResizeObserverClassDefinition; - - /** - * Stores pending animation frame requests - */ - private openRequestAnimationFrame: number | null = null; - - /** - * The position the current scroll animation started at - */ - private currentScrollAnimStartPosition: number; - - /** - * The target position of the current scroll animation - */ - private currentScrollAnimEndPosition: number; - - /** - * Start time for current scroll animation - */ - private currentScrollAnimStartTime: number; - - /** - * Flag indicates if a scroll animation is in progress - */ - private isScrollAnimating: boolean = false; - - /** - * Stores last scroll position from scroll events - */ - private lastRecordedScroll: number = 0; - - /** - * Constructor - */ - constructor(props: HorizontalOverflowProps) { - super(props); - - this.horizontalOverflowItemsRef = React.createRef(); - this.throttledScroll = throttle(this.onScrollChange); - this.throttledResize = throttle(this.onWindowResize); - this.overflow = false; - - this.state = { - direction: Direction.ltr, - itemsHeight: props.fixedHeight, - }; - } - - /** - * Renders the Horizontal Overflow markup - */ - public render(): React.ReactElement { - const { - horizontalOverflow_contentRegion, - horizontalOverflow_previous, - horizontalOverflow_next, - }: HorizontalOverflowClassNameContract = this.props.managedClasses; - - return ( -
    -
    -
      - {this.getItems()} -
    -
    -
    - {this.withSlot(ButtonDirection.previous)} -
    -
    - {this.withSlot(ButtonDirection.next)} -
    -
    - ); - } - - /** - * React life-cycle method - */ - public componentDidMount(): void { - if (!this.props.children) { - return; - } - - const itemsHeight: number = this.getItemHeight(); - - if (itemsHeight !== this.state.itemsHeight) { - this.setState({ - itemsHeight, - }); - } - - if (this.overflow !== this.isOverflow()) { - this.handleOverflowChange(); - } - - if (canUseDOM() && this.horizontalOverflowItemsRef.current) { - this.updateDirection(); - this.lastRecordedScroll = this.getScrollPosition(); - this.horizontalOverflowItemsRef.current.addEventListener( - "scroll", - this.throttledScroll - ); - window.addEventListener("resize", this.throttledResize); - - // TODO #1142 https://github.com/Microsoft/fast/issues/1142 - // Full browser support imminent - // Revisit usage once Safari and Firefox adapt - // https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 - // https://bugs.webkit.org/show_bug.cgi?id=157743 - if (((window as unknown) as WindowWithResizeObserver).ResizeObserver) { - this.resizeObserver = new ((window as unknown) as WindowWithResizeObserver).ResizeObserver( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - (entries: ResizeObserverEntry[]): void => { - if (this.overflow !== this.isOverflow()) { - this.handleOverflowChange(); - } - } - ); - this.resizeObserver.observe(this.horizontalOverflowItemsRef.current); - } - } - } - - /** - * React life-cycle method - */ - public componentWillUnmount(): void { - if (canUseDOM() && this.horizontalOverflowItemsRef.current) { - this.horizontalOverflowItemsRef.current.removeEventListener( - "scroll", - this.throttledScroll - ); - window.removeEventListener("resize", this.throttledResize); - - // TODO #1142 https://github.com/Microsoft/fast/issues/1142 - // Full browser support imminent - // Revisit usage once Safari and Firefox adapt - // https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 - // https://bugs.webkit.org/show_bug.cgi?id=157743 - if ( - this.resizeObserver && - typeof this.resizeObserver.disconnect === "function" - ) { - this.resizeObserver.disconnect(); - this.resizeObserver = null; - } - - // Cancel any pending calls - this.throttledResize.cancel(); - this.throttledScroll.cancel(); - } - } - - /** - * React life-cycle method - */ - public getSnapshotBeforeUpdate(prevProps: HorizontalOverflowProps): boolean | null { - if ( - React.Children.toArray(prevProps.children).length < - React.Children.toArray(this.props.children).length - ) { - return true; - } - - return null; - } - - /** - * React life-cycle method - */ - public componentDidUpdate( - prevProps: HorizontalOverflowProps, - prevState: HorizontalOverflowState, - snapshot: boolean | null - ): void { - if (snapshot !== null) { - this.handleOverflowChange(); - } - this.updateDirection(); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames( - classNames(this.props.managedClasses.horizontalOverflow) - ); - } - - /** - * Track scroll position - */ - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - private onScrollCapture = (event: React.UIEvent): void => { - this.lastRecordedScroll = this.getScrollPosition(); - }; - - /** - * A child item got focus make sure it is in view - */ - private onItemFocus = (event: React.FocusEvent): void => { - if (!this.isOverflow()) { - return; - } - - const itemLeft: number = (event.currentTarget as HTMLElement).offsetLeft; - const itemWidth: number = (event.currentTarget as HTMLElement).clientWidth; - const itemRight: number = itemLeft + itemWidth; - - const viewportWidth: number = this.getAvailableWidth(); - const peek: number = this.getScrollPeek(itemWidth); - - let scrollStart: number = this.lastRecordedScroll; - - if (this.isScrollAnimating) { - const duration: number = this.props.scrollDuration - ? this.props.scrollDuration - : HorizontalOverflow.defaultScrollAnimationDuration; - const currentDate: number = new Date().getTime(); - const currentTime: number = currentDate - this.currentScrollAnimStartTime; - - scrollStart = this.getScrollAnimationPosition(currentTime, duration); - } - - if (itemLeft - this.lastRecordedScroll < 0) { - this.scrollContent(scrollStart, itemLeft - peek); - } else if (itemRight - scrollStart > viewportWidth) { - this.scrollContent(scrollStart, itemRight - viewportWidth + peek); - } - }; - - /** - * Compares viewport width, item width and desired peek value to come up with - * peek value to use. We don't want to clip focused item to get peek on next/previous item. - */ - private getScrollPeek = (itemWidth: number): number => { - const viewportWidth: number = this.getAvailableWidth(); - - let maxPeek: number = viewportWidth - itemWidth; - maxPeek = maxPeek < 0 ? 0 : maxPeek; - - const peek: number = - this.props.nextItemPeek > maxPeek ? maxPeek : this.props.nextItemPeek; - - return peek; - }; - - /** - * Callback for on scroll change - */ - private onScrollChange = (): void => { - if (typeof this.props.onScrollChange === "function") { - this.props.onScrollChange(this.getPositionData()); - } - - // If the onOverflowChange callback exists, we want to update overflow - // based on scroll change - if (typeof this.props.onOverflowChange === "function") { - const positionData: PositionChange = this.getPositionData(); - if ( - this.overflowStart === !positionData.start || - this.overflowEnd === !positionData.end - ) { - this.handleOverflowChange(); - } - } - }; - - /** - * Get the scroll change data - */ - private getPositionData = (): PositionChange => { - if (isNil(this.horizontalOverflowItemsRef.current)) { - return { start: true, end: true }; - } - const scrollPosition: number = this.getScrollPosition(); - - const isAtBeginning: boolean = scrollPosition === 0; - const isAtEnd: boolean = - this.horizontalOverflowItemsRef.current.scrollWidth - scrollPosition === - this.horizontalOverflowItemsRef.current.clientWidth; - - return { start: isAtBeginning, end: isAtEnd }; - }; - - /** - * Gets the style for the `ul` element containing the items - */ - private getListStyle(): React.CSSProperties { - return { - position: "relative", - whiteSpace: "nowrap", - overflowX: "scroll", - padding: 0, - margin: 0, - }; - } - - /** - * onLoad handler to make sure any children affecting height are accounted for - */ - private itemsOnLoad = (): void => { - const itemsHeight: number = this.getItemHeight(); - - if (itemsHeight !== this.state.itemsHeight) { - this.setState({ - itemsHeight, - }); - } - - if (this.overflow !== this.isOverflow()) { - this.handleOverflowChange(); - } - }; - - /** - * Handles the resize event - */ - private onWindowResize = (): void => { - if (this.overflow !== this.isOverflow()) { - this.handleOverflowChange(); - } - }; - - /** - * Checks if overflow is occuring - */ - private isOverflow(): boolean { - const availableWidth: number = this.getAvailableWidth(); - const itemWidths: number[] = this.getItemWidths(); - const totalItemWidth: number = itemWidths.reduce( - (a: number, b: number) => a + b, - 0 - ); - - return totalItemWidth > availableWidth; - } - - /** - * Callback for the horizontal overflow change - */ - private handleOverflowChange = (): void => { - this.overflow = this.isOverflow(); - - if (this.overflow) { - const positionData: PositionChange = this.getPositionData(); - this.overflowStart = !positionData.start; - this.overflowEnd = !positionData.end; - } else { - this.overflowStart = false; - this.overflowEnd = false; - } - - if (typeof this.props.onOverflowChange === "function") { - this.props.onOverflowChange({ - overflowStart: this.overflowStart, - overflowEnd: this.overflowEnd, - }); - } - }; - - /** - * Returns the fixed height if set or identifies and returns the tallest child height - */ - private getItemHeight(): number { - return this.props.fixedHeight !== null - ? this.props.fixedHeight - : this.getItemMaxHeight(); - } - - /** - * Identifies and returns the tallest child height - */ - private getItemMaxHeight(): number { - let itemMaxHeight: number = 0; - - const children: HTMLElement = get( - this.horizontalOverflowItemsRef, - "current.childNodes" - ); - - if (!canUseDOM() || !children) { - return itemMaxHeight; - } - - const childNodes: HTMLElement[] = Array.prototype.slice.call(children); - - for (const childNode of childNodes) { - const childNodeHeight: number = getClientRectWithMargin(childNode).height; - - if (childNodeHeight > itemMaxHeight) { - itemMaxHeight = childNodeHeight; - } - } - - return itemMaxHeight; - } - - /** - * Gets the children displayed as items to be scrolled - */ - private getItems(): React.ReactNode { - return React.Children.map( - this.withoutSlot([ButtonDirection.previous, ButtonDirection.next]), - ( - child: React.ReactNode, - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - index: number - ): React.ReactElement => { - return ( -
  • - {child} -
    • - ); - } - ); - } - - /** - * Gets the distance to scroll based on the direction - */ - private getScrollDistanceFromButtonDirection( - buttonDirection: ButtonDirection, - itemWidths: number[], - scrollPosition: number - ): number { - if (itemWidths.length === 0 || !canUseDOM()) { - return 0; - } - - let distance: number = 0; - - if (buttonDirection === ButtonDirection.next) { - distance = this.getWithinMaxDistance(scrollPosition, itemWidths); - } else { - distance = this.getWithinMinDistance(scrollPosition, itemWidths); - } - - return Math.ceil(distance); - } - - /** - * Gets the distance unless it is over the maximum distance, then use maximum distance instead - */ - private getWithinMaxDistance(scrollPosition: number, itemWidths: number[]): number { - const maxDistance: number = this.getMaxScrollDistance(); - if (scrollPosition === maxDistance) { - return maxDistance; - } - - const distance: number = this.getNextDistance(itemWidths, scrollPosition); - - return distance >= maxDistance ? maxDistance : distance; - } - - /** - * Gets the distance unless it is under the minimum distance, then use minimum distance instead - */ - private getWithinMinDistance(scrollPosition: number, itemWidths: number[]): number { - if (scrollPosition === 0) { - return 0; - } - - const distance: number = this.getPreviousDistance(itemWidths, scrollPosition); - return distance <= 0 ? 0 : distance; - } - - /** - * Gets the distance to scroll if the next button has been clicked - */ - private getNextDistance(itemWidths: number[], scrollPosition: number): number { - let distance: number = 0; - - for ( - let i: number = 0, itemWidthsLength: number = itemWidths.length; - i < itemWidthsLength; - i++ - ) { - if ( - distance + itemWidths[i] > scrollPosition + this.getAvailableWidth() && - distance !== scrollPosition - ) { - return distance + this.getScrollPeek(itemWidths[i]); - } - distance += itemWidths[i]; - } - return distance; - } - - /** - * Gets the distance to scroll if the previous button has been clicked - */ - private getPreviousDistance(itemWidths: number[], scrollPosition: number): number { - const availableWidth: number = this.getAvailableWidth(); - - let distance: number = this.getMaxScrollDistance() + availableWidth; - - for (let i: number = itemWidths.length - 1; i >= 0; i--) { - if ( - distance - itemWidths[i] < scrollPosition - availableWidth && - distance !== scrollPosition - ) { - return distance - this.getScrollPeek(itemWidths[i]); - } - distance -= itemWidths[i]; - } - return distance; - } - - /** - * Gets the maximum distance that can be scrolled - */ - private getMaxScrollDistance(): number { - if (isNil(this.horizontalOverflowItemsRef.current)) { - return 0; - } - return ( - this.horizontalOverflowItemsRef.current.scrollWidth - this.getAvailableWidth() - ); - } - - /** - * Handler for the previous click event - */ - private handlePreviousClick = (): void => { - this.handleClick(ButtonDirection.previous); - }; - - /** - * Handler for the next click event - */ - private handleNextClick = (): void => { - this.handleClick(ButtonDirection.next); - }; - - /** - * Handler for the click event fired after next or previous has been clicked - */ - private handleClick(buttonDirection: ButtonDirection): void { - this.scrollContent( - this.getScrollPosition(), - this.getScrollDistanceFromButtonDirection( - buttonDirection, - this.getItemWidths(), - this.getScrollPosition() - ) - ); - } - - /** - * Returns the available content region width - */ - private getAvailableWidth(): number { - if (isNil(this.horizontalOverflowItemsRef.current)) { - return 0; - } - return this.horizontalOverflowItemsRef.current.clientWidth; - } - - /** - * Returns the items widths - */ - private getItemWidths(): number[] { - if (isNil(this.horizontalOverflowItemsRef.current)) { - return []; - } - const items: HTMLElement[] = Array.prototype.slice.call( - this.horizontalOverflowItemsRef.current.childNodes - ); - const itemWidths: number[] = []; - - for (const item of items) { - itemWidths.push(getClientRectWithMargin(item).width); - } - - return itemWidths; - } - - /** - * Easing animation - * Inspired by the github gist contribution: https://gist.github.com/andjosh/6764939 - */ - private easeInOutQuad( - currentTime: number, - startValue: number, - changeInValue: number, - duration: number - ): number { - currentTime /= duration / 2; - - if (currentTime < 1) { - return (changeInValue / 2) * currentTime * currentTime + startValue; - } - - currentTime--; - - return (-changeInValue / 2) * (currentTime * (currentTime - 2) - 1) + startValue; - } - - /** - * Scrolls the container for the items list - */ - private scrollContent( - startScrollPosition: number, - targetScrollPosition: number - ): void { - const newScrollPosition: number = Math.max( - 0, - Math.min(targetScrollPosition, this.getMaxScrollDistance()) - ); - - this.isScrollAnimating = true; - this.currentScrollAnimStartPosition = startScrollPosition; - this.currentScrollAnimEndPosition = newScrollPosition; - this.currentScrollAnimStartTime = new Date().getTime(); - this.requestFrame(); - } - - /** - * Request's an animation frame if there are currently no open animation frame requests - */ - private requestFrame = (): void => { - if (this.openRequestAnimationFrame === null) { - this.openRequestAnimationFrame = window.requestAnimationFrame( - this.updateScrollAnimation - ); - } - }; - - /** - * Animate one frame of scrolling - */ - private updateScrollAnimation = (): void => { - this.openRequestAnimationFrame = null; - const duration: number = this.props.scrollDuration - ? this.props.scrollDuration - : HorizontalOverflow.defaultScrollAnimationDuration; - const currentDate: number = new Date().getTime(); - const currentTime: number = currentDate - this.currentScrollAnimStartTime; - - this.setScrollPosition(this.getScrollAnimationPosition(currentTime, duration)); - - if (currentTime < duration) { - this.requestFrame(); - } else { - this.isScrollAnimating = false; - } - }; - - /** - * get scroll animation position for the provided time - */ - private getScrollAnimationPosition = ( - currentTime: number, - duration: number - ): number => { - if (currentTime < duration) { - return this.easeInOutQuad( - currentTime, - this.currentScrollAnimStartPosition, - this.currentScrollAnimEndPosition - this.currentScrollAnimStartPosition, - duration - ); - } else { - return this.currentScrollAnimEndPosition; - } - }; - - /** - * Gets the scroll position and accounts for direction - */ - private getScrollPosition = (): number => { - if (isNil(this.horizontalOverflowItemsRef.current)) { - return 0; - } - - const scrollLeft: number = RtlScrollConverter.getScrollLeft( - this.horizontalOverflowItemsRef.current, - this.state.direction - ); - return this.state.direction === Direction.rtl ? -scrollLeft : scrollLeft; - }; - - /** - * Sets the scroll position and accounts for direction - */ - private setScrollPosition = (scrollValue: number): void => { - if (!isNil(this.horizontalOverflowItemsRef.current)) { - RtlScrollConverter.setScrollLeft( - this.horizontalOverflowItemsRef.current, - this.state.direction === Direction.rtl ? -scrollValue : scrollValue, - this.state.direction - ); - } - }; - - /** - * updates the direction in state if necessary - */ - private updateDirection = (): void => { - const newDirection: Direction = this.getDirection(); - if (newDirection !== this.state.direction) { - this.setState({ - direction: newDirection, - }); - } - }; - - /** - * gets the current direction - */ - private getDirection = (): Direction | null => { - if (this.horizontalOverflowItemsRef.current === null) { - return Direction.ltr; - } - - const closest: Element = this.horizontalOverflowItemsRef.current.closest( - `[${HorizontalOverflow.DirectionAttributeName}]` - ); - - return closest === null || - closest.getAttribute(HorizontalOverflow.DirectionAttributeName) === - Direction.ltr - ? Direction.ltr - : Direction.rtl; - }; -} - -export default HorizontalOverflow; -export * from "./horizontal-overflow.props"; -export { HorizontalOverflowClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/horizontal-overflow/index.ts b/packages/react/fast-components-react-base/src/horizontal-overflow/index.ts deleted file mode 100644 index c27ae843404..00000000000 --- a/packages/react/fast-components-react-base/src/horizontal-overflow/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import HorizontalOverflow from "./horizontal-overflow"; -import horizontalOverflowSchema from "./horizontal-overflow.schema"; -import horizontalOverflowSchema2 from "./horizontal-overflow.schema.2"; - -export { horizontalOverflowSchema, horizontalOverflowSchema2 }; -export default HorizontalOverflow; -export * from "./horizontal-overflow"; diff --git a/packages/react/fast-components-react-base/src/hypertext/README.md b/packages/react/fast-components-react-base/src/hypertext/README.md deleted file mode 100644 index 015220efe3a..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Hypertext -The *hypertext* component is an [anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) element which accepts children. *Hypertexts* most commonly appear as inline elements within the context of a sentence or a paragraph. - -## Accessibility -A *hypertext* should have two points of visual distinction when *inline*. diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.props.ts b/packages/react/fast-components-react-base/src/hypertext/hypertext.props.ts deleted file mode 100644 index 04b200b1749..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.props.ts +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { - HypertextClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type HypertextManagedClasses = ManagedClasses; -export type HypertextUnhandledProps = React.AnchorHTMLAttributes; -export interface HypertextHandledProps extends HypertextManagedClasses { - /** - * The hypertext content - */ - children?: React.ReactNode; -} - -export type HypertextProps = HypertextHandledProps & HypertextUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.2.ts b/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.2.ts deleted file mode 100644 index 7e3c441da34..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.2.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Hypertext", - description: "A hypertext component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/hypertext", - formPluginId: "@microsoft/fast-components-react-base/hypertext", - properties: { - href: { - title: "HTML href attribute", - type: "string", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/hypertext/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.ts b/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.ts deleted file mode 100644 index e79da634cab..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.schema.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Hypertext", - description: "A hypertext component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/hypertext", - formPluginId: "@microsoft/fast-components-react-base/hypertext", - properties: { - href: { - title: "HTML href attribute", - type: "string", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/hypertext/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.spec.tsx b/packages/react/fast-components-react-base/src/hypertext/hypertext.spec.tsx deleted file mode 100644 index ca7fc165ace..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.spec.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow, ShallowWrapper } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Hypertext, { - HypertextClassNameContract, - HypertextHandledProps, - HypertextManagedClasses, - HypertextProps, - HypertextUnhandledProps, -} from "./hypertext"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("hypertext", (): void => { - const managedClasses: HypertextClassNameContract = { - hypertext: "hypertext-class", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Hypertext as any).name}`).toBe( - Hypertext.displayName - ); - }); - - test("should have correct root element type 'a'", () => { - const rendered: ShallowWrapper = shallow(); - expect(rendered.type()).toBe("a"); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should return an object that includes all valid props which are not enumerated as handledProps", () => { - const handledProps: HypertextHandledProps & HypertextManagedClasses = { - managedClasses, - }; - - const unhandledProps: HypertextUnhandledProps = { - "aria-hidden": true, - }; - - const props: HypertextProps = { ...handledProps, ...unhandledProps }; - - const rendered: any = shallow(); - - expect(rendered.prop("aria-hidden")).not.toBe(undefined); - expect(rendered.prop("aria-hidden")).toEqual(true); - }); - - test("should render with an attribute of `href` if `href` is passed as an unhandled prop", () => { - const testHref: string = "http://www.microsoft.com"; - const rendered: any = shallow( - - ); - - expect(rendered.prop("href")).toBe(testHref); - }); - - test("should NOT render with an attribute of `href` if `href` prop is NOT passed", () => { - const rendered: any = shallow(); - - expect(rendered.prop("href")).toBe(undefined); - }); - - test("should correctly handle children", () => { - const rendered: any = shallow( - Children - ); - - expect(rendered.prop("children")).not.toBe(undefined); - expect(rendered.prop("children")).toEqual("Children"); - }); -}); diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.stories.tsx b/packages/react/fast-components-react-base/src/hypertext/hypertext.stories.tsx deleted file mode 100644 index 9344f9076e7..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.stories.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import Hypertext from "../hypertext"; - -storiesOf("Hypertext", module) - .add("With href", () => Hypertext) - .add("Without href", () => Without href); diff --git a/packages/react/fast-components-react-base/src/hypertext/hypertext.tsx b/packages/react/fast-components-react-base/src/hypertext/hypertext.tsx deleted file mode 100644 index e2544d2a317..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/hypertext.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { HypertextClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { - HypertextHandledProps, - HypertextProps, - HypertextUnhandledProps, -} from "./hypertext.props"; - -class Hypertext extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Hypertext`; - - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - managedClasses: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - return ( -     - {this.props.children} - - ); - } - - /** - * Generates class names - */ - protected generateClassNames(): string { - return super.generateClassNames(this.props.managedClasses.hypertext); - } -} - -export default Hypertext; -export * from "./hypertext.props"; -export { HypertextClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/hypertext/index.ts b/packages/react/fast-components-react-base/src/hypertext/index.ts deleted file mode 100644 index b6996342f10..00000000000 --- a/packages/react/fast-components-react-base/src/hypertext/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Hypertext from "./hypertext"; -import hypertextSchema from "./hypertext.schema"; -import hypertextSchema2 from "./hypertext.schema.2"; - -export { hypertextSchema, hypertextSchema2 }; -export default Hypertext; -export * from "./hypertext"; diff --git a/packages/react/fast-components-react-base/src/image/README.md b/packages/react/fast-components-react-base/src/image/README.md deleted file mode 100644 index 0586dbb7817..00000000000 --- a/packages/react/fast-components-react-base/src/image/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Image -The *image* component is based on the standard [image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) and [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) elements. A **picture** element can be created by passing one or more [source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) elements as `children` with a prop of `slot="source"`. Consult [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for more information on responsive images. - -## Accessibility -An *image* must **always** have an `alt` attribute. Not only does it give the *image* meaning for non-sighted users, but if the *image* fails to load, the `alt` text will be displayed instead. Always use descriptive `alt` text that concisely describes what the *image* conveys. Make sure you are communicating what the *image* is telling you visually. Usage of other aria attributes such as `aria-describedbby` or `aria-labelledby` are helpful when a shorter description is not adequate or the *image* is too complex to easily describe. Learn more about appropriate usage from [W3C](https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA15). If the *image* is purely for visual decoration and does not convey any meaningful information, such as an icon to reinforce adjacent text, then you should set the `alt` attribute to an empty string: `alt=""` or/and add `role="presentation"`. \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/image/image.props.ts b/packages/react/fast-components-react-base/src/image/image.props.ts deleted file mode 100644 index 14c7c958b2b..00000000000 --- a/packages/react/fast-components-react-base/src/image/image.props.ts +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { - ImageClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export type ImageUnhandledProps = Omit< - React.HTMLAttributes, - "children" ->; -export type ImageManagedClasses = ManagedClasses; -export interface ImageHandledProps extends ImageManagedClasses { - /** - * The HTML alt attribute value is important for overall accessibility, providing a textual - * alternative to non-text content - */ - alt: string; - - /** - * The HTML sizes attribute for the image element - */ - sizes?: string; - - /** - * The HTML src attribute for the image element - */ - src?: string; - - /** - * The HTML srcSet attribute for the image element - */ - srcSet?: string; - - /** - * The image children - */ - children?: - | Array> - | React.ReactElement; -} - -export type ImageProps = ImageHandledProps & ImageUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/image/image.schema.ts b/packages/react/fast-components-react-base/src/image/image.schema.ts deleted file mode 100644 index 906f14aba08..00000000000 --- a/packages/react/fast-components-react-base/src/image/image.schema.ts +++ /dev/null @@ -1,29 +0,0 @@ -export default { - $schema: "http://json-schema.org/schema#", - title: "Image", - description: "An image component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/image", - formPluginId: "@microsoft/fast-components-react-base/image", - properties: { - alt: { - title: "HTML alt attribute", - type: "string", - examples: ["HTML alt attribute example text"], - }, - sizes: { - title: "HTML sizes attribute", - type: "string", - }, - src: { - title: "HTML src attribute", - type: "string", - examples: ["https://placehold.it/80x80"], - }, - srcSet: { - title: "HTML srcSet attribute", - type: "string", - }, - }, - required: ["src", "alt"], -}; diff --git a/packages/react/fast-components-react-base/src/image/image.spec.tsx b/packages/react/fast-components-react-base/src/image/image.spec.tsx deleted file mode 100644 index 3c512baca30..00000000000 --- a/packages/react/fast-components-react-base/src/image/image.spec.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Image, { - ImageClassNameContract, - ImageHandledProps, - ImageProps, - ImageSlot, - ImageUnhandledProps, -} from "./image"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("image", (): void => { - const managedClasses: ImageClassNameContract = { - image: "image-class", - image__picture: "picture-class", - }; - const alt: string = "Image alt text test string"; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Image as any).name}`).toBe(Image.displayName); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(alt); - shallow( - alt - - - ); - }).not.toThrow(); - }); - - test("should return an object that includes all valid props which are not enumerated as handledProps", () => { - const handledProps: ImageHandledProps = { - managedClasses, - alt, - src: "https://placehold.it/200x200", - }; - const unhandledProps: ImageUnhandledProps = { - "aria-hidden": true, - }; - const props: ImageProps = { ...handledProps, ...unhandledProps }; - const rendered: any = shallow(); - - expect(rendered.prop("aria-hidden")).not.toBe(undefined); - expect(rendered.prop("aria-hidden")).toEqual(true); - }); - - test("should render an `` element if `src` prop is passed", () => { - const rendered: any = shallow( - {alt} - ); - - expect(rendered.type()).toBe("img"); - }); - - test("should render a `` element if children with the prop of `slot='source'` are passed", () => { - const rendered: any = shallow( - {alt} - - - ); - - expect(rendered.type()).toBe("picture"); - }); - - test("should NOT render with a srcset value if no `srcSet` prop is passed", () => { - const rendered: any = shallow( - {alt} - ); - - expect(rendered.prop("srcSet")).toBe(null); - }); - - test("should render with a srcset value when `srcSet` prop is passed", () => { - const rendered: any = shallow( - {alt} - ); - - expect(rendered.prop("srcSet")).toBe( - "https://placehold.it/20x20/ 767w, https://placehold.it/40x40/ 1w" - ); - }); - - test("should NOT render with a sizes value if no `sizes` prop is passed", () => { - const rendered: any = shallow( - {alt} - ); - - expect(rendered.prop("sizes")).toBe(null); - }); - - test("should render with a sizes value when `sizes` prop is passed", () => { - const rendered: any = shallow( - {alt} - ); - - expect(rendered.prop("sizes")).toBe("100vw"); - }); - - // parametrized image class name tests - [ - { - name: "should correctly assign empty className", - imageHandledProps: {} as ImageHandledProps, - className: "", - expectedClassName: null, - }, - { - name: "should correctly assign className with root className", - imageHandledProps: {} as ImageHandledProps, - className: "class-name", - expectedClassName: "class-name", - }, - { - name: "should correctly assign className with root className and input props", - imageHandledProps: { - managedClasses: { - image: "image-class", - image__picture: "picture-class", - }, - } as ImageHandledProps, - className: "class-name", - expectedClassName: "image-class picture-class class-name", - }, - ].forEach(({ name, imageHandledProps, className, expectedClassName }: any) => { - test(name, () => { - const props: ImageProps = { ...imageHandledProps }; - const rendered: any = shallow( - - - - ); - - expect(rendered.prop("className")).toEqual(expectedClassName); - }); - }); -}); diff --git a/packages/react/fast-components-react-base/src/image/image.stories.tsx b/packages/react/fast-components-react-base/src/image/image.stories.tsx deleted file mode 100644 index ba55690183d..00000000000 --- a/packages/react/fast-components-react-base/src/image/image.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; -import Image, { ImageSlot } from "./"; - -const sourceElements: JSX.Element[] = [ - , - , - , - , - , -]; - -storiesOf("Image", module) - .add("Default", () => ( - {"Placeholder - )) - .add("With source elements", () => ( - {"Placeholder - {sourceElements} - - )); diff --git a/packages/react/fast-components-react-base/src/image/image.tsx b/packages/react/fast-components-react-base/src/image/image.tsx deleted file mode 100644 index 3e105251f4e..00000000000 --- a/packages/react/fast-components-react-base/src/image/image.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { ImageClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { classNames } from "@microsoft/fast-web-utilities"; -import { get } from "lodash-es"; -import React from "react"; -import { DisplayNamePrefix } from "../utilities"; -import { ImageHandledProps, ImageProps, ImageUnhandledProps } from "./image.props"; - -export enum ImageSlot { - source = "source", -} - -class Image extends Foundation { - public static displayName: string = `${DisplayNamePrefix}Image`; - - public static defaultProps: Partial = { - managedClasses: {}, - }; - - protected handledProps: HandledProps = { - managedClasses: void 0, - alt: void 0, - sizes: void 0, - src: void 0, - srcSet: void 0, - }; - - /** - * Renders the component - */ - public render(): React.ReactElement { - let className: string = classNames(this.props.managedClasses.image); - - if (!this.props.children) { - return ( - {this.props.alt} - ); - } else { - className = `${className} ${get( - this.props, - "managedClasses.image__picture", - "" - )}`; - - return ( - - {this.withSlot(ImageSlot.source)} - {this.props.alt} - - ); - } - } -} - -export default Image; -export * from "./image.props"; -export { ImageClassNameContract }; diff --git a/packages/react/fast-components-react-base/src/image/index.ts b/packages/react/fast-components-react-base/src/image/index.ts deleted file mode 100644 index 01fc119f11d..00000000000 --- a/packages/react/fast-components-react-base/src/image/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Image from "./image"; -import imageSchema from "./image.schema"; - -export { imageSchema }; -export default Image; -export * from "./image"; diff --git a/packages/react/fast-components-react-base/src/index.spec.ts b/packages/react/fast-components-react-base/src/index.spec.ts deleted file mode 100644 index 3bb97c38ac4..00000000000 --- a/packages/react/fast-components-react-base/src/index.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as path from "path"; -import { includesAllSubdirectoriesAsNamedExports } from "../../../../build/helpers/file-includes-all-subdirectories-as-named-exports"; - -describe("index.ts", (): void => { - test("should export all components in the src directory", () => { - expect(() => { - includesAllSubdirectoriesAsNamedExports(path.resolve(__dirname, "index.ts"), [ - "utilities", - ]); - }).not.toThrow(); - }); -}); diff --git a/packages/react/fast-components-react-base/src/index.ts b/packages/react/fast-components-react-base/src/index.ts deleted file mode 100644 index ec2a5abccaf..00000000000 --- a/packages/react/fast-components-react-base/src/index.ts +++ /dev/null @@ -1,134 +0,0 @@ -import AutoSuggest from "./auto-suggest"; -export { AutoSuggest }; -export * from "./auto-suggest"; - -import Badge from "./badge"; -export { Badge }; -export * from "./badge"; - -import Breadcrumb from "./breadcrumb"; -export { Breadcrumb }; -export * from "./breadcrumb"; - -import Button from "./button"; -export { Button }; -export * from "./button"; - -import Card from "./card"; -export { Card }; -export * from "./card"; - -import ContextMenu from "./context-menu"; -export { ContextMenu }; -export * from "./context-menu"; - -import ContextMenuItem from "./context-menu-item"; -export { ContextMenuItem }; -export * from "./context-menu-item"; - -import Checkbox from "./checkbox"; -export { Checkbox }; -export * from "./checkbox"; - -import DataGrid from "./data-grid"; -export { DataGrid }; -export * from "./data-grid"; - -import Dialog from "./dialog"; -export { Dialog }; -export * from "./dialog"; - -import Divider from "./divider"; -export { Divider }; -export * from "./divider"; - -import HorizontalOverflow from "./horizontal-overflow"; -export { HorizontalOverflow }; -export * from "./horizontal-overflow"; - -import Hypertext from "./hypertext"; -export { Hypertext }; -export * from "./hypertext"; - -import Image from "./image"; -export { Image }; -export * from "./image"; - -import Label from "./label"; -export { Label }; -export * from "./label"; - -import Listbox from "./listbox"; -export { Listbox }; -export * from "./listbox"; - -import ListboxItem from "./listbox-item"; -export { ListboxItem }; -export * from "./listbox-item"; - -import NumberField from "./number-field"; -export { NumberField }; -export * from "./number-field"; - -import Progress from "./progress"; -export { Progress }; -export * from "./progress"; - -import Radio from "./radio"; -export { Radio }; -export * from "./radio"; - -import Select from "./select"; -export { Select }; -export * from "./select"; - -import Slider from "./slider"; -export { Slider }; -export * from "./slider"; - -import SliderTrackItem from "./slider-track-item"; -export { SliderTrackItem }; -export * from "./slider-track-item"; - -// holding off on exporting this until we are confident of the implementation -// import StackPanel from "./stack-panel"; -// export { StackPanel }; -// export * from "./stack-panel"; - -import Tabs from "./tabs"; -export { Tabs }; -export * from "./tabs"; - -import TextArea from "./text-area"; -export { TextArea }; -export * from "./text-area"; - -import TextField from "./text-field"; -export { TextField }; -export * from "./text-field"; - -import Toggle from "./toggle"; -export { Toggle }; -export * from "./toggle"; - -import TreeView from "./tree-view"; -export { TreeView }; -export * from "./tree-view"; - -import TreeViewItem from "./tree-view-item"; -export { TreeViewItem }; -export * from "./tree-view-item"; - -import Typography from "./typography"; -export { Typography }; -export * from "./typography"; - -export { WindowWithIntersectionObserver, WindowWithResizeObserver } from "./utilities"; -export * from "./utilities/resize-observer"; -export * from "./utilities/resize-observer-entry"; -export * from "./utilities/intersection-observer"; -export * from "./utilities/intersection-observer-entry"; - -import ViewportPositioner from "./viewport-positioner"; -export { ViewportPositioner }; -export * from "./viewport-positioner"; diff --git a/packages/react/fast-components-react-base/src/label/README.md b/packages/react/fast-components-react-base/src/label/README.md deleted file mode 100644 index a9f72519c6a..00000000000 --- a/packages/react/fast-components-react-base/src/label/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Label -The *label* component is based on the standard [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) or `legend` element. It can be used alone or grouped with other related components. Some components have the *label* built-in, but most do not. - -## Accessibility -Input elements inside a `form` must be associated with corresponding `label` elements, either by using *label* as a wrapper element for the form input, or by associating the `for` attribute of the *label* with the input element’s `id` attribute. A meaningful `label` is still required on input elements with implicit labels (e.g. a search input flagged by a background “search” icon). In these cases, the `hidden` option should be passed as `true`. Learn more about the correct usage of labels in the [W3C WAI documentation](https://www.w3.org/WAI/tutorials/forms/labels/). \ No newline at end of file diff --git a/packages/react/fast-components-react-base/src/label/index.ts b/packages/react/fast-components-react-base/src/label/index.ts deleted file mode 100644 index a422ac6f97d..00000000000 --- a/packages/react/fast-components-react-base/src/label/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Label from "./label"; -import labelSchema from "./label.schema"; -import labelSchema2 from "./label.schema.2"; - -export { labelSchema, labelSchema2 }; -export default Label; -export * from "./label"; diff --git a/packages/react/fast-components-react-base/src/label/label.props.ts b/packages/react/fast-components-react-base/src/label/label.props.ts deleted file mode 100644 index 3f0faa3511a..00000000000 --- a/packages/react/fast-components-react-base/src/label/label.props.ts +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { - LabelClassNameContract, - ManagedClasses, -} from "@microsoft/fast-components-class-name-contracts-base"; - -export enum LabelTag { - label = "label", - legend = "legend", -} - -export type LabelManagedClasses = ManagedClasses; -export interface LabelUnhandledProps - extends React.LabelHTMLAttributes, - React.HTMLAttributes {} -export interface LabelHandledProps extends LabelManagedClasses { - /** - * Label content - */ - children?: React.ReactNode | React.ReactNode[]; - - /** - * If label is hidden (needed in contexts such as glyph-only search inputs) - */ - hidden?: boolean; - - /** - * Use the appropriate HTML tag type depending on context - */ - tag?: LabelTag; -} - -export type LabelProps = LabelHandledProps & LabelUnhandledProps; diff --git a/packages/react/fast-components-react-base/src/label/label.schema.2.ts b/packages/react/fast-components-react-base/src/label/label.schema.2.ts deleted file mode 100644 index 6acb9b086b7..00000000000 --- a/packages/react/fast-components-react-base/src/label/label.schema.2.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { linkedDataSchema } from "@microsoft/fast-tooling"; - -/** - * Complies with FAST Tooling 2.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Label", - description: "A label component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/label", - formPluginId: "@microsoft/fast-components-react-base/label", - properties: { - tag: { - title: "HTML tag", - type: "string", - enum: ["label", "legend"], - default: "label", - }, - hidden: { - title: "Hidden", - type: "boolean", - }, - children: { - ...linkedDataSchema, - formPluginId: "@microsoft/fast-components-react-base/label/children", - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/label/label.schema.ts b/packages/react/fast-components-react-base/src/label/label.schema.ts deleted file mode 100644 index 215ff3df79a..00000000000 --- a/packages/react/fast-components-react-base/src/label/label.schema.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Complies with FAST Tooling 1.0 - */ -export default { - $schema: "http://json-schema.org/schema#", - title: "Label", - description: "A label component's schema definition.", - type: "object", - id: "@microsoft/fast-components-react-base/label", - formPluginId: "@microsoft/fast-components-react-base/label", - properties: { - tag: { - title: "HTML tag", - type: "string", - enum: ["label", "legend"], - default: "label", - }, - hidden: { - title: "Hidden", - type: "boolean", - }, - }, - reactProperties: { - children: { - title: "Children", - type: "children", - formPluginId: "@microsoft/fast-components-react-base/label/children", - defaults: ["text"], - }, - }, -}; diff --git a/packages/react/fast-components-react-base/src/label/label.spec.tsx b/packages/react/fast-components-react-base/src/label/label.spec.tsx deleted file mode 100644 index ec450056095..00000000000 --- a/packages/react/fast-components-react-base/src/label/label.spec.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, shallow } from "enzyme"; -import { DisplayNamePrefix } from "../utilities"; -import Label, { - LabelClassNameContract, - LabelHandledProps, - LabelProps, - LabelTag, - LabelUnhandledProps, -} from "./label"; - -/* - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("label", (): void => { - const managedClasses: LabelClassNameContract = { - label: "label-class", - label__hidden: "label-hidden-class", - }; - - test("should have a displayName that matches the component name", () => { - expect(`${DisplayNamePrefix}${(Label as any).name}`).toBe(Label.displayName); - }); - - test("should not throw if managedClasses are not provided", () => { - expect(() => { - shallow(