Merge branch 'master' into mituron/carousel-app-mode-fix

Author: kolaps33

.github/CONTRIBUTING.md

@@ -229,6 +229,6 @@ lerna add @fluentui/react-proptypes packages/react
 [11]: https://github.com/microsoft/fluent-ui-react/blob/master/src/themes/teams/components/Button/buttonStyles.ts
 [12]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts
 [13]: https://github.com/microsoft/fluent-ui-react/blob/master/src/components/Menu/MenuItem.tsx
-[14]: https://lernajs.io/
+[14]: https://lerna.js.org
 [15]: https://yarnpkg.com/en/docs/workspaces
 [16]: https://github.com/lerna/lerna/tree/master/commands/add

CHANGELOG.md

@@ -23,14 +23,19 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - `mode` property from `focusZone` configuration in accessibility behaviors is no longer supported - the focus zone will always be in embed mode @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
 - `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
 - Returned function from `useAccessibility` no longer keeps the same reference @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
-- Changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
+- Add logic for mounting/removing elements when they are shown/hidden using the `Animation` component; `Animation` component is not rendering element anymore, just applying classes to it's children @mnajdova ([#2115](https://github.com/microsoft/fluent-ui-react/pull/2115))
+- Restricted prop set in the `Button`, `Avatar`, `Box` and `Image` styles; changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
+- Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
+- Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
 
 ### Fixes
 - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
+- Update iconOnly button hover, focus styles and add new `background5` and `backgroundHover2` design tokens in Teams theme @codepretty ([#2211](https://github.com/microsoft/fluent-ui-react/pull/2211))
 - Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
 - Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
+- Adding actionable items into `Carousel` @kolaps33 ([#2271](https://github.com/microsoft/fluent-ui-react/pull/2271))
 
 ### Features
 - Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236))

build/config.ts

@@ -1,5 +1,6 @@
 import * as path from 'path'
 import * as _ from 'lodash'
+import * as webpack from 'webpack'
 
 // ------------------------------------
 // Environment vars
@@ -21,12 +22,14 @@ const envConfig = {
   // ----------------------------------
   path_base: path.resolve(__dirname, '..'),
   dir_build: 'build',
+  dir_docs: 'docs',
   dir_docs_dist: 'docs/dist',
   dir_docs_src: 'docs/src',
   dir_e2e: 'e2e',
   dir_e2e_src: 'e2e/server',
   dir_e2e_dist: 'e2e/dist',
   dir_packages: 'packages',
+  dir_perf: 'perf',
   dir_perf_dist: 'perf/dist',
   dir_perf_src: 'perf/src',
   dir_umd_dist: 'dist/umd',
@@ -41,6 +44,7 @@ const fromBase = (...paths: string[]) => (...subPaths: string[]) => base(...path
 
 const tempPaths = {
   build: fromBase(envConfig.dir_build),
+  docs: fromBase(envConfig.dir_docs),
   docsDist: fromBase(envConfig.dir_docs_dist),
   docsSrc: fromBase(envConfig.dir_docs_src),
   e2e: fromBase(envConfig.dir_e2e),
@@ -51,6 +55,7 @@ const tempPaths = {
   packageSrc: (packageName: string, ...paths: string[]) =>
     base(envConfig.dir_packages, packageName, 'src', ...paths),
   packages: fromBase(envConfig.dir_packages),
+  perf: fromBase(envConfig.dir_perf),
   perfDist: fromBase(envConfig.dir_perf_dist),
   perfSrc: fromBase(envConfig.dir_perf_src),
   umdDist: fromBase(envConfig.dir_umd_dist),
@@ -91,8 +96,8 @@ const config = {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: __DEV__ && 'eval-source-map',
-  compiler_mode: __DEV__ ? 'development' : 'production',
+  compiler_devtool: __DEV__ && ('eval-source-map' as webpack.Options.Devtool),
+  compiler_mode: (__DEV__ ? 'development' : 'production') as webpack.Configuration['mode'],
   compiler_globals: {
     __DEV__,
     __PERF__,

build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts

@@ -1,10 +1,12 @@
 export default [
   '@babel/runtime@7.1.2',
   '@babel/runtime@7.4.5',
+  '@babel/runtime@7.7.6',
   'classnames@2.2.6',
   'compute-scroll-into-view@1.0.11',
   'css-in-js-utils@2.0.1',
   'css-in-js-utils@3.0.0',
+  'dom-helpers@5.1.3',
   'downshift@3.2.6',
   'downshift@3.2.10',
   'downshift@3.2.14',
@@ -78,6 +80,7 @@ export default [
   'react-is@16.8.2',
   'react-is@16.9.0',
   'react-resize-detector@4.2.0',
+  'react-transition-group@4.3.0',
   'react@16.8.3',
   'resize-observer-polyfill@1.5.1',
   'rtl-css-js@1.11.0',

build/package.json

@@ -28,6 +28,7 @@
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
     "@types/webpack-dev-middleware": "^2.0.1",
+    "@types/webpack-env": "^1.14.1",
     "@types/webpack-hot-middleware": "^2.16.3",
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/parser": "^2.5.0",

build/screener/screener.config.js

@@ -1,7 +1,10 @@
+// @ts-check
+
 require('@fluentui/internal-tooling/babel/register')
 
 const config = require('../config').default
-const { compilerOptions } = require('../tsconfig.docs.json')
+
+const { compilerOptions } = require(config.paths.docs('tsconfig.json'))
 
 require('tsconfig-paths').register({
   baseUrl: config.path_base,

build/screener/screener.steps.ts

@@ -3,7 +3,7 @@ import fs from 'fs'
 import Steps from 'screener-runner/src/steps'
 import keys from 'screener-runner/src/keys'
 
-const DEFAULT_THEMES: ScreenerThemes = ['teams']
+const DEFAULT_THEMES: ScreenerThemeName[] = ['teams']
 
 Steps.prototype.resetExternalLayout = function resetExternalLayout() {
   return this.executeScript(`window.resetExternalLayout()`)

build/tsconfig.common.json

@@ -12,7 +12,6 @@
       "@fluentui/*": ["packages/*/src"]
     },
     "types": ["node", "jest"],
-    "typeRoots": ["../types", "../node_modules/@types"],
     "jsx": "react",
     "importHelpers": true,
     "isolatedModules": true,

build/tsconfig.docs.json

@@ -1,6 +1,8 @@
 {
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": ["../types", "../node_modules/@types"],
+    "types": ["node", "webpack-env", "screener-runner"]
   }
 }

build/tsconfig.e2e.json

@@ -1,12 +1,13 @@
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import { webpack as lernaAliases } from 'lerna-alias'
+import webpack from 'webpack'
 
 import config from './config'
 
 const { paths } = config
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: 'development',
@@ -18,7 +19,7 @@ const webpackConfig: any = {
     path: paths.e2eDist(),
     pathinfo: true,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   node: {
     fs: 'empty',
     module: 'empty',
@@ -40,7 +41,7 @@ const webpackConfig: any = {
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.build('tsconfig.e2e.json') }),
+    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.e2e('tsconfig.json') }),
     new CopyWebpackPlugin([
       {
         from: paths.e2eSrc('index.html'),

build/tsconfig.json

@@ -2,12 +2,13 @@ import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import { webpack as lernaAliases } from 'lerna-alias'
 import { argv } from 'yargs'
+import webpack from 'webpack'
 
 import config from './config'
 
 const { paths } = config
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: 'development',
@@ -20,7 +21,7 @@ const webpackConfig: any = {
     pathinfo: true,
     publicPath: config.compiler_public_path,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   node: {
     fs: 'empty',
     module: 'empty',
@@ -42,7 +43,7 @@ const webpackConfig: any = {
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.build('tsconfig.perf.json') }),
+    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.perf('tsconfig.json') }),
     new CopyWebpackPlugin([
       {
         from: paths.perfSrc('index.html'),

build/tsconfig.perf.json

@@ -27,7 +27,7 @@ class IgnoreNotFoundExportPlugin {
   }
 }
 
-const makeConfig = (srcPath, name) => ({
+const makeConfig = (srcPath: string, name: string): webpack.Configuration => ({
   mode: 'production',
   name: 'client',
   target: 'web',

build/tsconfig.test.json

@@ -12,7 +12,7 @@ import config from './config'
 const { paths } = config
 const { __DEV__, __PROD__ } = config.compiler_globals
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: config.compiler_mode,
@@ -26,7 +26,7 @@ const webpackConfig: any = {
     pathinfo: true,
     publicPath: config.compiler_public_path,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   externals: {
     '@babel/standalone': 'Babel',
     'anchor-js': 'AnchorJS',
@@ -68,7 +68,7 @@ const webpackConfig: any = {
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
-      tsconfig: paths.base('build/tsconfig.docs.json'),
+      tsconfig: paths.docs('tsconfig.json'),
       watch: [paths.docsSrc(), paths.packages()],
     }),
     new webpack.DefinePlugin(config.compiler_globals),
@@ -112,7 +112,7 @@ const webpackConfig: any = {
         entries: true,
         modules: true,
         modulesCount: 500,
-      }),
+      } as any),
   ].filter(Boolean),
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
@@ -141,7 +141,7 @@ const webpackConfig: any = {
 // Environment Configuration
 // ------------------------------------
 if (__DEV__) {
-  const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
+  const webpackHotPath = `${config.compiler_public_path}__compiler_hmr`
   const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
     {
       path: webpackHotPath, // The path which the middleware is serving the event stream on
@@ -153,8 +153,9 @@ if (__DEV__) {
     },
     (val, key) => `&${key}=${val}`,
   ).join('')}`
+  const entry = webpackConfig.entry as webpack.Entry
+  entry.app = [webpackHotMiddlewareEntry].concat((entry as webpack.Entry).app)
 
-  webpackConfig.entry.app = [webpackHotMiddlewareEntry].concat(webpackConfig.entry.app)
   webpackConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),

build/webpack.config.e2e.ts

@@ -1,9 +1,10 @@
+import webpack from 'webpack'
 import config from './config'
 import webpackConfig from './webpack.config'
 
 const { paths } = config
 
-const webpackUMDConfig = (packageName: string) => {
+const webpackUMDConfig = (packageName: string): webpack.Configuration => {
   const pkg = require(`../packages/${packageName}/package.json`)
 
   return {

build/webpack.config.perf.ts

@@ -28,6 +28,7 @@
     "@types/node": "^10.3.2",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-router-dom": "^4.3.4",
+    "@types/webpack-env": "^1.14.1",
     "gulp": "^4.0.2"
   },
   "publishConfig": {

build/webpack.config.stats.ts

@@ -1,4 +1,5 @@
 import { Provider, themes, pxToRem, createTheme } from '@fluentui/react'
+// @ts-ignore
 import AnchorJS from 'anchor-js'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'

build/webpack.config.ts

@@ -1,7 +1,11 @@
 import { Animation } from '@fluentui/react'
 import * as React from 'react'
 
-const AnimationMinimalPerf = () => <Animation />
+const AnimationMinimalPerf = () => (
+  <Animation>
+    <div />
+  </Animation>
+)
 
 AnimationMinimalPerf.iterations = 5000
 AnimationMinimalPerf.filename = 'AnimationMinimal.perf.tsx'

build/webpack.config.umd.ts

@@ -21,18 +21,26 @@ const AnimationExampleDirection = () => (
       <Text content="Reverse" />
       <Text content="Alternate" />
       <Text content="Alternate reverse" />
-      <Animation name="spinner">
-        <Icon name="mention" circular bordered />
-      </Animation>
-      <Animation name="spinner" direction="reverse">
-        <Icon name="mention" circular bordered />
-      </Animation>
-      <Animation name="spinner" direction="alternate">
-        <Icon name="mention" circular bordered />
-      </Animation>
-      <Animation name="spinner" direction="alternate-reverse">
-        <Icon name="mention" circular bordered />
-      </Animation>
+      <div>
+        <Animation name="spinner">
+          <Icon name="mention" circular bordered />
+        </Animation>
+      </div>
+      <div>
+        <Animation name="spinner" direction="reverse">
+          <Icon name="mention" circular bordered />
+        </Animation>
+      </div>
+      <div>
+        <Animation name="spinner" direction="alternate">
+          <Icon name="mention" circular bordered />
+        </Animation>
+      </div>
+      <div>
+        <Animation name="spinner" direction="alternate-reverse">
+          <Icon name="mention" circular bordered />
+        </Animation>
+      </div>
     </Grid>
   </Provider>
 )