From 60ff30a5f01f75d1e814c8154ccca30c7f8b1039 Mon Sep 17 00:00:00 2001 From: Kenneth Chau Date: Tue, 11 Feb 2020 21:05:22 -0800 Subject: [PATCH] Making "gulp docs" work (#11929) * update docs to use correct types * fixing tsconfig path * fixing relative imports of the react/package.json from docs * apparently the eslintplugin is stuck on a specific version (taking on deprecated utils) * gulp docs works!! --- .../fluentui/ability-attributes/tsconfig.json | 7 +- packages/fluentui/accessibility/tsconfig.json | 7 +- packages/fluentui/code-sandbox/tsconfig.json | 6 +- .../fluentui/docs-components/tsconfig.json | 6 +- .../docs/src/components/Sidebar/Sidebar.tsx | 2 +- .../fluentui/docs/src/views/Introduction.tsx | 36 ++- packages/fluentui/docs/tsconfig.json | 33 +-- packages/fluentui/e2e/tsconfig.json | 12 +- packages/fluentui/eslint-plugin/package.json | 4 +- packages/fluentui/perf/tsconfig.json | 11 +- .../fluentui/react-bindings/tsconfig.json | 7 +- .../tsconfig.json | 7 +- .../tsconfig.json | 7 +- .../react-component-ref/tsconfig.json | 7 +- .../fluentui/react-proptypes/tsconfig.json | 7 +- .../react/src/components/Tooltip/Tooltip.tsx | 240 ++++++++---------- .../teams/components/Input/inputStyles.ts | 35 +-- .../teams/components/Input/inputVariables.ts | 46 ++-- .../react/src/utils/positioner/Popper.tsx | 2 +- packages/fluentui/react/tsconfig.json | 19 +- packages/fluentui/state/tsconfig.json | 7 +- packages/fluentui/styles/tsconfig.json | 7 +- scripts/fluent-import/index.js | 44 +++- scripts/package.json | 1 + scripts/typescript/tsconfig.fluentui.json | 2 +- scripts/webpack/webpack.config.perf.ts | 2 +- scripts/webpack/webpack.config.ts | 2 +- yarn.lock | 33 --- 28 files changed, 258 insertions(+), 341 deletions(-) diff --git a/packages/fluentui/ability-attributes/tsconfig.json b/packages/fluentui/ability-attributes/tsconfig.json index 2662e8d1b1b14..6e0bdd8186656 100644 --- a/packages/fluentui/ability-attributes/tsconfig.json +++ b/packages/fluentui/ability-attributes/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,8 +9,5 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ] + "include": ["src", "test"] } diff --git a/packages/fluentui/accessibility/tsconfig.json b/packages/fluentui/accessibility/tsconfig.json index 7f29c539aa415..864380d8159dc 100644 --- a/packages/fluentui/accessibility/tsconfig.json +++ b/packages/fluentui/accessibility/tsconfig.json @@ -1,11 +1,8 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts" }, - "include": [ - "src", - "test" - ] + "include": ["src", "test"] } diff --git a/packages/fluentui/code-sandbox/tsconfig.json b/packages/fluentui/code-sandbox/tsconfig.json index f3f4eb48eb12f..38a94c3f34028 100644 --- a/packages/fluentui/code-sandbox/tsconfig.json +++ b/packages/fluentui/code-sandbox/tsconfig.json @@ -1,12 +1,10 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts" }, - "include": [ - "src" - ], + "include": ["src"], "references": [ { "path": "../docs-components" diff --git a/packages/fluentui/docs-components/tsconfig.json b/packages/fluentui/docs-components/tsconfig.json index d43e4542a6502..fd2eee106165a 100644 --- a/packages/fluentui/docs-components/tsconfig.json +++ b/packages/fluentui/docs-components/tsconfig.json @@ -1,10 +1,8 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts" }, - "include": [ - "src" - ] + "include": ["src"] } diff --git a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx index d77aa149ab523..bd87069096fa0 100644 --- a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx +++ b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx @@ -24,7 +24,7 @@ import { NavLink, NavLinkProps, withRouter } from 'react-router-dom'; type ComponentMenuItem = { displayName: string; type: string }; -const pkg = require('../../../../packages/react/package.json'); +const pkg = require('@fluentui/react/package.json'); const componentMenu: ComponentMenuItem[] = require('../../componentMenu'); const behaviorMenu: ComponentMenuItem[] = require('../../behaviorMenu'); diff --git a/packages/fluentui/docs/src/views/Introduction.tsx b/packages/fluentui/docs/src/views/Introduction.tsx index 0cc7bcd35e880..45239a2be2f83 100644 --- a/packages/fluentui/docs/src/views/Introduction.tsx +++ b/packages/fluentui/docs/src/views/Introduction.tsx @@ -1,10 +1,10 @@ -import * as _ from 'lodash' -import * as React from 'react' -import { NavLink } from 'react-router-dom' -import { Flex, Header } from '@fluentui/react' +import * as _ from 'lodash'; +import * as React from 'react'; +import { NavLink } from 'react-router-dom'; +import { Flex, Header } from '@fluentui/react'; -import pkg from '../../../packages/react/package.json' -import Logo from '../components/Logo/Logo' +import pkg from '@fluentui/react/package.json'; +import Logo from '../components/Logo/Logo'; const Introduction = () => (
@@ -16,14 +16,14 @@ const Introduction = () => ( marginTop: '24px', marginBottom: '0px', fontSize: '2rem', - textAlign: 'center', + textAlign: 'center' }} > {_.capitalize(pkg.name)} {pkg.description} @@ -31,27 +31,21 @@ const Introduction = () => (

- Fluent UI provides extensible vanilla JavaScript solutions to component state, styling, and - accessibility. These powerful features are exposed behind simple APIs based on natural - language. -

-

- Fluent UI React is being built as an exemplar of the Fluent UI design language, component - specifications, and utilities. + Fluent UI provides extensible vanilla JavaScript solutions to component state, styling, and accessibility. These powerful features are + exposed behind simple APIs based on natural language.

+

Fluent UI React is being built as an exemplar of the Fluent UI design language, component specifications, and utilities.

Learn

- The best place to start is with the Shorthand Props{' '} - concept. + The best place to start is with the Shorthand Props concept.

Start

- If you want to get going right away, see the Quick Start{' '} - guide. + If you want to get going right away, see the Quick Start guide.

-) +); -export default Introduction +export default Introduction; diff --git a/packages/fluentui/docs/tsconfig.json b/packages/fluentui/docs/tsconfig.json index ed59f464c8d56..85ca2140168a4 100644 --- a/packages/fluentui/docs/tsconfig.json +++ b/packages/fluentui/docs/tsconfig.json @@ -1,32 +1,15 @@ { - "extends": "@uifabric/build/typescript/tsconfig.common", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "module": "esnext", "paths": { - "@fluentui/*": [ - "packages/fluentui/*/src" - ], - "docs/*": [ - "packages/fluentui/docs/*" - ], - "src/*": [ - "packages/fluentui/react/src/*" - ], - "test/*": [ - "packages/fluentui/react/test/*" - ] + "@fluentui/*": ["packages/fluentui/*/src/index"], + "docs/*": ["packages/fluentui/docs/*"], + "src/*": ["packages/fluentui/react/src/*"], + "test/*": ["packages/fluentui/react/test/*"] }, - "typeRoots": [ - "../types", - "../node_modules/@types" - ], - "types": [ - "node", - "webpack-env", - "screener-runner" - ] + "typeRoots": ["../../../typings", "../node_modules/@types"], + "types": ["node", "webpack-env", "screener-runner"] }, - "include": [ - "./src" - ] + "include": ["./src"] } diff --git a/packages/fluentui/e2e/tsconfig.json b/packages/fluentui/e2e/tsconfig.json index c0c18a90fcad1..495051ec6cfa5 100644 --- a/packages/fluentui/e2e/tsconfig.json +++ b/packages/fluentui/e2e/tsconfig.json @@ -1,15 +1,9 @@ { - "extends": "@uifabric/build/typescript/tsconfig.common", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "module": "esnext", "allowSyntheticDefaultImports": true, - "types": [ - "node", - "jest", - "webpack-env" - ] + "types": ["node", "jest", "webpack-env"] }, - "include": [ - "." - ] + "include": ["."] } diff --git a/packages/fluentui/eslint-plugin/package.json b/packages/fluentui/eslint-plugin/package.json index 5bb2d9465a953..f3afee0bb71f3 100644 --- a/packages/fluentui/eslint-plugin/package.json +++ b/packages/fluentui/eslint-plugin/package.json @@ -2,8 +2,8 @@ "name": "@fluentui/eslint-plugin", "version": "0.44.0", "dependencies": { - "@typescript-eslint/eslint-plugin": "^2.5.0", - "@typescript-eslint/experimental-utils": "^2.5.0" + "@typescript-eslint/eslint-plugin": "2.8.0", + "@typescript-eslint/experimental-utils": "2.8.0" }, "files": [ "rules" diff --git a/packages/fluentui/perf/tsconfig.json b/packages/fluentui/perf/tsconfig.json index 822247d91045a..1a7d295be004a 100644 --- a/packages/fluentui/perf/tsconfig.json +++ b/packages/fluentui/perf/tsconfig.json @@ -1,13 +1,8 @@ { - "extends": "@uifabric/build/typescript/tsconfig.common", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "module": "esnext", - "types": [ - "node", - "webpack-env" - ] + "types": ["node", "webpack-env"] }, - "include": [ - "./src" - ] + "include": ["./src"] } diff --git a/packages/fluentui/react-bindings/tsconfig.json b/packages/fluentui/react-bindings/tsconfig.json index 9dc760f8bc5d1..f784157c0794b 100644 --- a/packages/fluentui/react-bindings/tsconfig.json +++ b/packages/fluentui/react-bindings/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,10 +9,7 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [ { "path": "../accessibility" diff --git a/packages/fluentui/react-component-event-listener/tsconfig.json b/packages/fluentui/react-component-event-listener/tsconfig.json index 4513f9e23eac4..06a56cc469b9d 100644 --- a/packages/fluentui/react-component-event-listener/tsconfig.json +++ b/packages/fluentui/react-component-event-listener/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,9 +9,6 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/packages/fluentui/react-component-nesting-registry/tsconfig.json b/packages/fluentui/react-component-nesting-registry/tsconfig.json index 4513f9e23eac4..06a56cc469b9d 100644 --- a/packages/fluentui/react-component-nesting-registry/tsconfig.json +++ b/packages/fluentui/react-component-nesting-registry/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,9 +9,6 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/packages/fluentui/react-component-ref/tsconfig.json b/packages/fluentui/react-component-ref/tsconfig.json index 4513f9e23eac4..06a56cc469b9d 100644 --- a/packages/fluentui/react-component-ref/tsconfig.json +++ b/packages/fluentui/react-component-ref/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,9 +9,6 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/packages/fluentui/react-proptypes/tsconfig.json b/packages/fluentui/react-proptypes/tsconfig.json index 32c907eb668cb..df76a678a641c 100644 --- a/packages/fluentui/react-proptypes/tsconfig.json +++ b/packages/fluentui/react-proptypes/tsconfig.json @@ -1,12 +1,9 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts" }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/packages/fluentui/react/src/components/Tooltip/Tooltip.tsx b/packages/fluentui/react/src/components/Tooltip/Tooltip.tsx index 2f35194a6eaf4..9dd4138b85747 100644 --- a/packages/fluentui/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/fluentui/react/src/components/Tooltip/Tooltip.tsx @@ -1,10 +1,10 @@ -import { Accessibility, tooltipAsLabelBehavior } from '@fluentui/accessibility' -import { ReactAccessibilityBehavior } from '@fluentui/react-bindings' -import { Ref } from '@fluentui/react-component-ref' -import * as customPropTypes from '@fluentui/react-proptypes' -import * as React from 'react' -import * as PropTypes from 'prop-types' -import * as _ from 'lodash' +import { Accessibility, tooltipAsLabelBehavior } from '@fluentui/accessibility'; +import { ReactAccessibilityBehavior } from '@fluentui/react-bindings'; +import { Ref } from '@fluentui/react-component-ref'; +import * as customPropTypes from '@fluentui/react-proptypes'; +import * as React from 'react'; +import * as PropTypes from 'prop-types'; +import * as _ from 'lodash'; import { applyAccessibilityKeyHandlers, @@ -19,26 +19,20 @@ import { setWhatInputSource, getOrGenerateIdFromShorthand, createShorthandFactory, - ShorthandFactory, -} from '../../utils' -import { ShorthandValue, Props } from '../../types' -import { - ALIGNMENTS, - POSITIONS, - Popper, - BasicPositioningProps, - PopperChildrenProps, -} from '../../utils/positioner' -import TooltipContent, { TooltipContentProps } from './TooltipContent' -import PortalInner from '../Portal/PortalInner' + ShorthandFactory +} from '../../utils'; +import { ShorthandValue, Props } from '../../types'; +import { ALIGNMENTS, POSITIONS, Popper, BasicPositioningProps, PopperChildrenProps } from '../../utils/positioner'; +import TooltipContent, { TooltipContentProps } from './TooltipContent'; +import PortalInner from '../Portal/PortalInner'; export interface TooltipSlotClassNames { - content: string + content: string; } export interface TooltipState { - open: boolean - contentId: string + open: boolean; + contentId: string; } export interface TooltipProps @@ -51,22 +45,22 @@ export interface TooltipProps * @default tooltipBehavior * @available tooltipAsLabelBehavior * */ - accessibility?: Accessibility + accessibility?: Accessibility; /** Additional CSS class name(s) to apply. */ - className?: string + className?: string; /** Initial value for 'open'. */ - defaultOpen?: boolean + defaultOpen?: boolean; /** Existing element the tooltip should be bound to. */ - mountNode?: HTMLElement + mountNode?: HTMLElement; /** Delay in ms for the mouse leave event, before the tooltip will be closed. */ - mouseLeaveDelay?: number + mouseLeaveDelay?: number; /** Defines whether tooltip is displayed. */ - open?: boolean + open?: boolean; /** * TODO: should this be centralized? @@ -77,18 +71,18 @@ export interface TooltipProps * - vw, CSS viewport width unit * - vh, CSS viewport height unit */ - offset?: string + offset?: string; /** A tooltip can show a pointer to trigger. */ - pointing?: boolean + pointing?: boolean; /** * DOM element that should be used as tooltip's target - instead of 'trigger' element that is used by default. */ - target?: HTMLElement + target?: HTMLElement; /** Element to be rendered in-place where the tooltip is defined. */ - trigger?: JSX.Element + trigger?: JSX.Element; } /** @@ -99,20 +93,20 @@ export interface TooltipProps * Implements [ARIA Tooltip](https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip) design pattern. */ export default class Tooltip extends AutoControlledComponent { - static displayName = 'Tooltip' + static displayName = 'Tooltip'; - static className = 'ui-tooltip' + static className = 'ui-tooltip'; static slotClassNames: TooltipSlotClassNames = { - content: `${Tooltip.className}__content`, - } + content: `${Tooltip.className}__content` + }; - static Content = TooltipContent + static Content = TooltipContent; static propTypes = { ...commonPropTypes.createCommon({ as: false, - content: false, + content: false }), align: PropTypes.oneOf(ALIGNMENTS), defaultOpen: PropTypes.bool, @@ -126,58 +120,51 @@ export default class Tooltip extends AutoControlledComponent + static create: ShorthandFactory; - contentRef = React.createRef() - pointerTargetRef = React.createRef() - triggerRef = React.createRef() - closeTimeoutId + contentRef = React.createRef(); + pointerTargetRef = React.createRef(); + triggerRef = React.createRef(); + closeTimeoutId; actionHandlers = { close: e => { - this.setTooltipOpen(false, e) - e.stopPropagation() - e.preventDefault() - }, - } + this.setTooltipOpen(false, e); + e.stopPropagation(); + e.preventDefault(); + } + }; getInitialAutoControlledState(): Partial { - return { open: false } + return { open: false }; } - static getAutoControlledStateFromProps( - props: TooltipProps, - state: TooltipState, - ): Partial { + static getAutoControlledStateFromProps(props: TooltipProps, state: TooltipState): Partial { return { - contentId: getOrGenerateIdFromShorthand('tooltip-content-', props.content, state.contentId), - } + contentId: getOrGenerateIdFromShorthand('tooltip-content-', props.content, state.contentId) + }; } - renderComponent({ - classes, - rtl, - accessibility, - }: RenderResultConfig): React.ReactNode { - const { mountNode, children, trigger } = this.props - const tooltipContent = this.renderTooltipContent(classes.content, rtl, accessibility) + renderComponent({ classes, rtl, accessibility }: RenderResultConfig): React.ReactNode { + const { mountNode, children, trigger } = this.props; + const tooltipContent = this.renderTooltipContent(classes.content, rtl, accessibility); - const triggerNode = childrenExist(children) ? children : trigger - const triggerElement = triggerNode && (React.Children.only(triggerNode) as React.ReactElement) - const triggerProps = this.getTriggerProps(triggerElement) + const triggerNode = childrenExist(children) ? children : trigger; + const triggerElement = triggerNode && (React.Children.only(triggerNode) as React.ReactElement); + const triggerProps = this.getTriggerProps(triggerElement); return ( <> @@ -186,70 +173,65 @@ export default class Tooltip extends AutoControlledComponent )} {tooltipContent} - ) + ); } getTriggerProps(triggerElement) { - const triggerProps: Props = {} + const triggerProps: Props = {}; triggerProps.onFocus = (e, ...args) => { if (isFromKeyboard()) { - this.trySetOpen(true, e) + this.trySetOpen(true, e); } - _.invoke(triggerElement, 'props.onFocus', e, ...args) - } + _.invoke(triggerElement, 'props.onFocus', e, ...args); + }; triggerProps.onBlur = (e, ...args) => { if (!this.shouldStayOpen(e)) { - this.trySetOpen(false, e) + this.trySetOpen(false, e); } - _.invoke(triggerElement, 'props.onBlur', e, ...args) - } + _.invoke(triggerElement, 'props.onBlur', e, ...args); + }; triggerProps.onMouseEnter = (e, ...args) => { - this.setTooltipOpen(true, e) - setWhatInputSource('mouse') - _.invoke(triggerElement, 'props.onMouseEnter', e, ...args) - } + this.setTooltipOpen(true, e); + setWhatInputSource('mouse'); + _.invoke(triggerElement, 'props.onMouseEnter', e, ...args); + }; triggerProps.onMouseLeave = (e, ...args) => { - this.setTooltipOpen(false, e) - _.invoke(triggerElement, 'props.onMouseLeave', e, ...args) - } + this.setTooltipOpen(false, e); + _.invoke(triggerElement, 'props.onMouseLeave', e, ...args); + }; - return triggerProps + return triggerProps; } getContentProps = (predefinedProps?) => { - const contentHandlerProps: Props = {} + const contentHandlerProps: Props = {}; contentHandlerProps.onMouseEnter = (e, contentProps) => { - this.setTooltipOpen(true, e) - _.invoke(predefinedProps, 'onMouseEnter', e, contentProps) - } + this.setTooltipOpen(true, e); + _.invoke(predefinedProps, 'onMouseEnter', e, contentProps); + }; contentHandlerProps.onMouseLeave = (e, contentProps) => { - this.setTooltipOpen(false, e) - _.invoke(predefinedProps, 'onMouseLeave', e, contentProps) - } + this.setTooltipOpen(false, e); + _.invoke(predefinedProps, 'onMouseLeave', e, contentProps); + }; - return contentHandlerProps - } + return contentHandlerProps; + }; shouldStayOpen = e => - _.invoke(e, 'currentTarget.contains', e.relatedTarget) || - _.invoke(this.contentRef.current, 'contains', e.relatedTarget) + _.invoke(e, 'currentTarget.contains', e.relatedTarget) || _.invoke(this.contentRef.current, 'contains', e.relatedTarget); - renderTooltipContent( - tooltipPositionClasses: string, - rtl: boolean, - accessibility: ReactAccessibilityBehavior, - ): JSX.Element { - const { align, position, target, offset } = this.props - const { open } = this.state + renderTooltipContent(tooltipPositionClasses: string, rtl: boolean, accessibility: ReactAccessibilityBehavior): JSX.Element { + const { align, position, target, offset } = this.props; + const { open } = this.state; return ( - ) + ); } renderPopperChildren = ( tooltipPositionClasses: string, rtl: boolean, accessibility: ReactAccessibilityBehavior, - { placement }: PopperChildrenProps, + { placement }: PopperChildrenProps ) => { - const { content, pointing } = this.props + const { content, pointing } = this.props; const tooltipContentAttributes = { ...(rtl && { dir: 'rtl' }), ...accessibility.attributes.tooltip, ...accessibility.keyHandlers.tooltip, className: tooltipPositionClasses, - ...this.getContentProps(), - } + ...this.getContentProps() + }; const tooltipContent = Tooltip.Content.create(content, { defaultProps: () => ({ @@ -287,40 +269,42 @@ export default class Tooltip extends AutoControlledComponent{tooltipContent} - } + if (!tooltipContent) return null; + + return {tooltipContent}; + }; trySetOpen(newValue: boolean, eventArgs: any) { - this.setState({ open: newValue }) - _.invoke(this.props, 'onOpenChange', eventArgs, { ...this.props, ...{ open: newValue } }) + this.setState({ open: newValue }); + _.invoke(this.props, 'onOpenChange', eventArgs, { ...this.props, ...{ open: newValue } }); } setTooltipOpen(newOpen, e) { - clearTimeout(this.closeTimeoutId) - newOpen ? this.trySetOpen(true, e) : this.scheduleTooltipClose(e) + clearTimeout(this.closeTimeoutId); + newOpen ? this.trySetOpen(true, e) : this.scheduleTooltipClose(e); } scheduleTooltipClose = e => { - const { mouseLeaveDelay } = this.props + const { mouseLeaveDelay } = this.props; this.closeTimeoutId = setTimeout(() => { - this.trySetOpen(false, e) - }, mouseLeaveDelay) - } + this.trySetOpen(false, e); + }, mouseLeaveDelay); + }; close = (e, onClose?: Function) => { if (this.state.open) { - this.trySetOpen(false, e) - onClose && onClose() - e.stopPropagation() + this.trySetOpen(false, e); + onClose && onClose(); + e.stopPropagation(); } - } + }; } -Tooltip.create = createShorthandFactory({ Component: Tooltip, mappedProp: 'content' }) +Tooltip.create = createShorthandFactory({ Component: Tooltip, mappedProp: 'content' }); diff --git a/packages/fluentui/react/src/themes/teams/components/Input/inputStyles.ts b/packages/fluentui/react/src/themes/teams/components/Input/inputStyles.ts index cdb8b3037cd27..e7af0b720bca7 100644 --- a/packages/fluentui/react/src/themes/teams/components/Input/inputStyles.ts +++ b/packages/fluentui/react/src/themes/teams/components/Input/inputStyles.ts @@ -1,7 +1,7 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' -import { InputProps } from '../../../../components/Input/Input' -import { InputVariables } from './inputVariables' -import { PositionProperty } from 'csstype' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; +import { InputProps } from '../../../../components/Input/Input'; +import { InputVariables } from './inputVariables'; +import { PositionProperty } from 'csstype'; const inputStyles: ComponentSlotStylesPrepared = { root: ({ props: p }): ICSSInJSStyle => ({ @@ -10,15 +10,17 @@ const inputStyles: ComponentSlotStylesPrepared = { position: 'relative', outline: 0, - ...(p.fluid && { width: '100%' }), + ...(p.fluid && { width: '100%' }) }), input: ({ props: p, variables: v }): ICSSInJSStyle => ({ backgroundColor: v.backgroundColor, ...(p.inverted && { - backgroundColor: v.backgroundColorInverted, + backgroundColor: v.backgroundColorInverted }), + lineHeight: 'unset', + color: v.fontColor, borderColor: v.borderColor, @@ -35,17 +37,16 @@ const inputStyles: ComponentSlotStylesPrepared = { '::placeholder': { color: v.placeholderColor, - opacity: 1, // undo Firefox default opacity + opacity: 1 // undo Firefox default opacity }, ':focus': { - borderColor: v.inputFocusBorderColor, + borderColor: v.inputFocusBorderColor }, ...(p.clearable && { padding: v.inputPaddingWithIconAtEnd }), ...(p.icon && { - padding: - p.iconPosition === 'start' ? v.inputPaddingWithIconAtStart : v.inputPaddingWithIconAtEnd, - }), + padding: p.iconPosition === 'start' ? v.inputPaddingWithIconAtStart : v.inputPaddingWithIconAtEnd + }) }), icon: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -54,12 +55,12 @@ const inputStyles: ComponentSlotStylesPrepared = { position: v.iconPosition as PositionProperty, ...(p.iconPosition === 'start' && { - left: v.iconLeft, + left: v.iconLeft }), ...(p.iconPosition === 'end' && { - right: v.iconRight, - }), - }), -} + right: v.iconRight + }) + }) +}; -export default inputStyles +export default inputStyles; diff --git a/packages/fluentui/react/src/themes/teams/components/Input/inputVariables.ts b/packages/fluentui/react/src/themes/teams/components/Input/inputVariables.ts index 447521c242a1f..8aad493d6b218 100644 --- a/packages/fluentui/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/fluentui/react/src/themes/teams/components/Input/inputVariables.ts @@ -1,33 +1,33 @@ -import { pxToRem } from '../../../../utils' +import { pxToRem } from '../../../../utils'; export interface InputVariables { - backgroundColor: string - backgroundColorInverted: string - borderColor: string - borderRadius: string - borderWidth: string - fontColor: string - fontSize: string - iconColor: string - iconPosition: string - iconRight: string - iconLeft: string - inputPaddingWithIconAtStart: string - inputPaddingWithIconAtEnd: string - inputPadding: string - inputFocusBorderColor: string - inputFocusBorderRadius: string - placeholderColor: string + backgroundColor: string; + backgroundColorInverted: string; + borderColor: string; + borderRadius: string; + borderWidth: string; + fontColor: string; + fontSize: string; + iconColor: string; + iconPosition: string; + iconRight: string; + iconLeft: string; + inputPaddingWithIconAtStart: string; + inputPaddingWithIconAtEnd: string; + inputPadding: string; + inputFocusBorderColor: string; + inputFocusBorderRadius: string; + placeholderColor: string; } export default (siteVars): InputVariables => ({ iconPosition: 'absolute', iconRight: pxToRem(10), iconLeft: pxToRem(6), - inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`, - inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, + inputPaddingWithIconAtStart: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(5)} ${pxToRem(24)}`, + inputPaddingWithIconAtEnd: `${pxToRem(5)} ${pxToRem(24)} ${pxToRem(5)} ${pxToRem(12)}`, - inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, + inputPadding: `${pxToRem(5)} ${pxToRem(12)}`, borderColor: 'transparent', borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, @@ -41,5 +41,5 @@ export default (siteVars): InputVariables => ({ iconColor: siteVars.colorScheme.default.foreground, inputFocusBorderColor: `transparent transparent ${siteVars.colorScheme.brand.borderFocus1} transparent`, inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, - placeholderColor: siteVars.colorScheme.default.foreground1, -}) + placeholderColor: siteVars.colorScheme.default.foreground1 +}); diff --git a/packages/fluentui/react/src/utils/positioner/Popper.tsx b/packages/fluentui/react/src/utils/positioner/Popper.tsx index e2e96de433f6d..e0e139f35dc15 100644 --- a/packages/fluentui/react/src/utils/positioner/Popper.tsx +++ b/packages/fluentui/react/src/utils/positioner/Popper.tsx @@ -214,7 +214,7 @@ const Popper: React.FunctionComponent = props => { const child = typeof children === 'function' ? children({ placement: computedPlacement, scheduleUpdate }) : (children as React.ReactElement); - return {React.Children.only(child)}; + return child ? {React.Children.only(child)} : null; }; Popper.defaultProps = { diff --git a/packages/fluentui/react/tsconfig.json b/packages/fluentui/react/tsconfig.json index 4fd768007c2d5..12351136aa21f 100644 --- a/packages/fluentui/react/tsconfig.json +++ b/packages/fluentui/react/tsconfig.json @@ -1,24 +1,15 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", "paths": { - "docs/*": [ - "packages/fluentui/docs/*" - ], - "src/*": [ - "packages/fluentui/react/src/*" - ], - "test/*": [ - "packages/fluentui/react/test/*" - ] + "docs/*": ["packages/fluentui/docs/*"], + "src/*": ["packages/fluentui/react/src/*"], + "test/*": ["packages/fluentui/react/test/*"] } }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [ { "path": "../accessibility" diff --git a/packages/fluentui/state/tsconfig.json b/packages/fluentui/state/tsconfig.json index 4513f9e23eac4..06a56cc469b9d 100644 --- a/packages/fluentui/state/tsconfig.json +++ b/packages/fluentui/state/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts", @@ -9,9 +9,6 @@ "noUnusedParameters": true, "strictNullChecks": true }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/packages/fluentui/styles/tsconfig.json b/packages/fluentui/styles/tsconfig.json index 32c907eb668cb..df76a678a641c 100644 --- a/packages/fluentui/styles/tsconfig.json +++ b/packages/fluentui/styles/tsconfig.json @@ -1,12 +1,9 @@ { - "extends": "@uifabric/build/typescript/tsconfig.fluentui", + "extends": "../../../scripts/typescript/tsconfig.fluentui", "compilerOptions": { "composite": true, "outDir": "dist/dts" }, - "include": [ - "src", - "test" - ], + "include": ["src", "test"], "references": [] } diff --git a/scripts/fluent-import/index.js b/scripts/fluent-import/index.js index afbce4a682552..c2ace5f97e5bc 100644 --- a/scripts/fluent-import/index.js +++ b/scripts/fluent-import/index.js @@ -113,7 +113,7 @@ function fixTsConfigs(outputPath) { const files = glob.sync('**/tsconfig.json', { cwd: outputPath }); const mapping = { - '@fluentui/*': ['packages/fluentui/*/src'], + '@fluentui/*': ['packages/fluentui/*/src/index'], 'docs/*': ['packages/fluentui/docs/*'], 'src/*': ['packages/fluentui/react/src/*'], 'test/*': ['packages/fluentui/react/test/*'] @@ -134,13 +134,21 @@ function fixTsConfigs(outputPath) { // TODO (fui repo merge): we need to unify behind a single set of tsconfig (as it is, we will have 3) if (tsconfig.extends) { - if (tsconfig.extends.includes('../../build')) { - tsconfig.extends = '@uifabric/build/typescript/tsconfig.fluentui'; + if (tsconfig.extends.includes('../build')) { + // TODO (fui repo merge): we need to switch to using @uifabric/build for this later + tsconfig.extends = '../../../scripts/typescript/tsconfig.fluentui'; } else { tsconfig.extends = '@uifabric/build/typescript/tsconfig.common'; } } + if (tsconfig.compilerOptions && tsconfig.compilerOptions.typeRoots) { + const typesIndex = tsconfig.compilerOptions.typeRoots.indexOf('../types'); + if (typesIndex > -1) { + tsconfig.compilerOptions.typeRoots[typesIndex] = '../../../typings'; + } + } + fs.writeJSONSync(fullPath, tsconfig, { spaces: 2 }); } } @@ -179,6 +187,14 @@ function fixEslint(outputPath) { content.extends = ['../../../scripts/eslint/index']; fs.writeJSONSync(fullPath, content, { spaces: 2 }); } + + const eslintPkgJsonFile = path.join(outputPath, 'eslint-plugin/package.json'); + let eslintPkgJson = fs.readJsonSync(eslintPkgJsonFile); + eslintPkgJson.dependencies = { + '@typescript-eslint/eslint-plugin': '2.8.0', + '@typescript-eslint/experimental-utils': '2.8.0' + }; + fs.writeJsonSync(eslintPkgJsonFile, eslintPkgJson, { spaces: 2 }); } function fixScriptsPackageName(outputPath) { @@ -303,6 +319,23 @@ function fixJestMapping(outputPath) { } } +function fixDocs(outputPath) { + const files = glob.sync('**/docs/**/*.+(ts|tsx)', { cwd: outputPath }); + + for (let file of files) { + const fullPath = path.join(outputPath, file); + + let contents = fs.readFileSync(fullPath, 'utf-8'); + + if (contents.includes('packages/react/package.json')) { + console.log(`fixing ${fullPath} to fix docs import of @fluentui/react/package.json`); + contents = contents.replace(/'[\.\/]+packages\/react\/package\.json'/, "'@fluentui/react/package.json'"); + } + + fs.writeFileSync(fullPath, contents); + } +} + function importFluent() { console.log('cloning FUI'); git(['clone', '--depth=1', 'https://github.com/microsoft/fluent-ui-react.git', '.']); @@ -332,9 +365,14 @@ function importFluent() { fixKeyboardKeys(outputPath); fixReactDep(outputPath); fixJestMapping(outputPath); + fixDocs(outputPath); console.log('removing tmp'); fs.removeSync(tmp); + + spawnSync('yarn', { cwd: root, stdio: 'inherit' }); + spawnSync('git', ['add', '.'], { cwd: root }); + spawnSync('yarn', ['lint-staged'], { cwd: root, stdio: 'inherit' }); } importFluent(); diff --git a/scripts/package.json b/scripts/package.json index 8a55becb001de..da8bb696c223e 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -54,6 +54,7 @@ "@types/webpack-env": "^1.14.1", "@types/webpack-hot-middleware": "^2.16.3", "@typescript-eslint/eslint-plugin": "2.8.0", + "@typescript-eslint/experimental-utils": "2.8.0", "@typescript-eslint/parser": "2.8.0", "@uifabric/prettier-rules": "^7.0.4", "async": "^2.6.1", diff --git a/scripts/typescript/tsconfig.fluentui.json b/scripts/typescript/tsconfig.fluentui.json index 4db4ee0ac6407..0a82a56fb39bf 100644 --- a/scripts/typescript/tsconfig.fluentui.json +++ b/scripts/typescript/tsconfig.fluentui.json @@ -3,7 +3,7 @@ "module": "commonjs", "target": "es5", "lib": ["es2015", "dom"], - "baseUrl": "../../../../", + "baseUrl": "../../", "paths": { "@uifabric/build": ["scripts"], "@fluentui/*": ["packages/fluentui/*/src"] diff --git a/scripts/webpack/webpack.config.perf.ts b/scripts/webpack/webpack.config.perf.ts index d71cdcf26a278..12b47426402ee 100644 --- a/scripts/webpack/webpack.config.perf.ts +++ b/scripts/webpack/webpack.config.perf.ts @@ -55,7 +55,7 @@ const webpackConfig: webpack.Configuration = { extensions: ['.ts', '.tsx', '.js', '.json'], alias: { ...lernaAliases(), - docs: paths.base('docs'), + docs: paths.docs(), src: paths.packageSrc('react'), // We are using React in production mode with tracing. diff --git a/scripts/webpack/webpack.config.ts b/scripts/webpack/webpack.config.ts index 78fedc9724ffe..a3b4e4529a66f 100644 --- a/scripts/webpack/webpack.config.ts +++ b/scripts/webpack/webpack.config.ts @@ -115,7 +115,7 @@ const webpackConfig: webpack.Configuration = { alias: { ...lernaAliases(), src: paths.packageSrc('react'), - docs: paths.base('docs') + docs: paths.docs() } }, optimization: { diff --git a/yarn.lock b/yarn.lock index 8f9bd5c99355f..9cc79c86c4253 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4427,26 +4427,6 @@ regexpp "^3.0.0" tsutils "^3.17.1" -"@typescript-eslint/eslint-plugin@^2.5.0": - version "2.19.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.19.0.tgz#bf743448a4633e4b52bee0c40148ba072ab3adbd" - integrity sha512-u7IcQ9qwsB6U806LupZmINRnQjC+RJyv36sV/ugaFWMHTbFm/hlLTRx3gGYJgHisxcGSTnf+I/fPDieRMhPSQQ== - dependencies: - "@typescript-eslint/experimental-utils" "2.19.0" - eslint-utils "^1.4.3" - functional-red-black-tree "^1.0.1" - regexpp "^3.0.0" - tsutils "^3.17.1" - -"@typescript-eslint/experimental-utils@2.19.0", "@typescript-eslint/experimental-utils@^2.5.0": - version "2.19.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.19.0.tgz#d5ca732f22c009e515ba09fcceb5f2127d841568" - integrity sha512-zwpg6zEOPbhB3+GaQfufzlMUOO6GXCNZq6skk+b2ZkZAIoBhVoanWK255BS1g5x9bMwHpLhX0Rpn5Fc3NdCZdg== - dependencies: - "@types/json-schema" "^7.0.3" - "@typescript-eslint/typescript-estree" "2.19.0" - eslint-scope "^5.0.0" - "@typescript-eslint/experimental-utils@2.8.0": version "2.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.8.0.tgz#208b4164d175587e9b03ce6fea97d55f19c30ca9" @@ -4483,19 +4463,6 @@ lodash.unescape "4.0.1" semver "5.5.0" -"@typescript-eslint/typescript-estree@2.19.0": - version "2.19.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.19.0.tgz#6bd7310b9827e04756fe712909f26956aac4b196" - integrity sha512-n6/Xa37k0jQdwpUszffi19AlNbVCR0sdvCs3DmSKMD7wBttKY31lhD2fug5kMD91B2qW4mQldaTEc1PEzvGu8w== - dependencies: - debug "^4.1.1" - eslint-visitor-keys "^1.1.0" - glob "^7.1.6" - is-glob "^4.0.1" - lodash "^4.17.15" - semver "^6.3.0" - tsutils "^3.17.1" - "@typescript-eslint/typescript-estree@2.8.0": version "2.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.8.0.tgz#fcc3fe6532840085d29b75432c8a59895876aeca"