diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 5da7cebc5dd965..930c567c64b10c 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -5,13 +5,7 @@ "label": "Typescript (oufr) watch", "type": "process", "command": "node", - "args": [ - "./scripts/node_modules/typescript/bin/tsc", - "-p", - "packages/office-ui-fabric-react/tsconfig.json", - "-w", - "--noEmit" - ], + "args": ["./scripts/node_modules/typescript/bin/tsc", "-p", "packages/office-ui-fabric-react/tsconfig.json", "-w", "--noEmit"], "problemMatcher": "$tsc", "group": { "kind": "build", diff --git a/common/changes/@uifabric/utilities/ftz-breakoutbug_2018-05-16-23-31.json b/common/changes/@uifabric/utilities/ftz-breakoutbug_2018-05-16-23-31.json index 9b6b761492b579..fca0edfc63a70c 100644 --- a/common/changes/@uifabric/utilities/ftz-breakoutbug_2018-05-16-23-31.json +++ b/common/changes/@uifabric/utilities/ftz-breakoutbug_2018-05-16-23-31.json @@ -8,4 +8,4 @@ ], "packageName": "@uifabric/utilities", "email": "benw@microsoft.com" -} +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/ftz-breakoutbug_2018-05-16-23-31.json b/common/changes/office-ui-fabric-react/ftz-breakoutbug_2018-05-16-23-31.json index 393e19463e04d9..0bc529a47cee1f 100644 --- a/common/changes/office-ui-fabric-react/ftz-breakoutbug_2018-05-16-23-31.json +++ b/common/changes/office-ui-fabric-react/ftz-breakoutbug_2018-05-16-23-31.json @@ -2,11 +2,10 @@ "changes": [ { "packageName": "office-ui-fabric-react", - "comment": - "Fixed FocusTrapZone bug: If first child in the FTZ is a FocusZone and that FZ's last focused child is not the first focusable child, shift-tab would break out of the FTZ.", + "comment": "Fixed FocusTrapZone bug: If first child in the FTZ is a FocusZone and that FZ's last focused child is not the first focusable child, shift-tab would break out of the FTZ.", "type": "patch" } ], "packageName": "office-ui-fabric-react", "email": "benw@microsoft.com" -} +} \ No newline at end of file diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json index be5fd8451434f8..718597602a6d8e 100644 --- a/common/config/rush/npm-shrinkwrap.json +++ b/common/config/rush/npm-shrinkwrap.json @@ -120,7 +120,7 @@ }, "@rush-temp/build": { "version": "file:projects/build.tgz", - "integrity": "sha1-M6fi7X8xQRlUS2C+3JTb8Gqtq3U=", + "integrity": "sha1-LSP9MyUu4NoYyp3afx7b/0UJ6/Q=", "requires": { "@microsoft/api-extractor": "4.3.7", "@microsoft/load-themed-styles": "1.7.60", @@ -718,7 +718,7 @@ }, "@rush-temp/charting": { "version": "file:projects/charting.tgz", - "integrity": "sha1-NFUQjWlt6SECqhZBn0Q0QQ8BJts=", + "integrity": "sha1-lKR5aaKXgojEGtG2xKHnHTS1W50=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/d3-array": "1.2.1", @@ -756,7 +756,7 @@ }, "@rush-temp/example-app-base": { "version": "file:projects/example-app-base.tgz", - "integrity": "sha1-cq4lKfgB8N5bVAJkmQabvlrbqX8=", + "integrity": "sha1-Jzt05RJnLnYTiie0Mztp3vKXdSk=", "requires": { "@types/es6-promise": "0.0.32", "@types/highlight.js": "9.12.2", @@ -777,7 +777,7 @@ }, "@rush-temp/experiments": { "version": "file:projects/experiments.tgz", - "integrity": "sha1-5KA9YW5WrIhP6F76WFFPnbipjoc=", + "integrity": "sha1-bs2lp+an5zasjOYOU2UNFovKRS0=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/enzyme": "3.1.5", @@ -806,7 +806,7 @@ }, "@rush-temp/fabric-website": { "version": "file:projects/fabric-website.tgz", - "integrity": "sha1-PuIccOr+qxNq/Eh9b8gLMErtJFY=", + "integrity": "sha1-77oJ/geKhunB+uIGEUWPAiKaqiM=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/es6-promise": "0.0.32", @@ -831,7 +831,7 @@ }, "@rush-temp/file-type-icons": { "version": "file:projects/file-type-icons.tgz", - "integrity": "sha1-bleqi2SCMiV1pbov4Z6Sqev46Bc=", + "integrity": "sha1-wIyLwJ08qEsL7Q3RZvud0LS5Qjo=", "requires": { "@types/react": "16.3.16", "@types/react-dom": "16.0.5", @@ -842,21 +842,21 @@ }, "@rush-temp/icons": { "version": "file:projects/icons.tgz", - "integrity": "sha1-yrDK/RlY36afD87jnr5CTwN8+i8=", + "integrity": "sha1-R3LOIETpgmR9M4pLcoZKJ1LPo+g=", "requires": { "tslib": "1.9.2" } }, "@rush-temp/jest-serializer-merge-styles": { "version": "file:projects/jest-serializer-merge-styles.tgz", - "integrity": "sha1-S5t85objboQJsFybC5UEbM7G0I8=", + "integrity": "sha1-HKHQgq3fftdalvhFdlg3pADouok=", "requires": { "@types/jest": "23.0.0" } }, "@rush-temp/merge-styles": { "version": "file:projects/merge-styles.tgz", - "integrity": "sha1-kyRkcfKxD4dKU41mVKh7ggMUbDs=", + "integrity": "sha1-tt9J+9QmgKJ3+HFqXuCyChhP0uU=", "requires": { "@types/jest": "23.0.0", "tslib": "1.9.2" @@ -864,7 +864,7 @@ }, "@rush-temp/office-ui-fabric-react": { "version": "file:projects/office-ui-fabric-react.tgz", - "integrity": "sha1-D95bmIBNHJAgok08M6x0aZCBc8c=", + "integrity": "sha1-MexuAoTRnftlJZc2+QYrwLWIOM8=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/enzyme": "3.1.5", @@ -898,14 +898,14 @@ }, "@rush-temp/office-ui-fabric-react-tslint": { "version": "file:projects/office-ui-fabric-react-tslint.tgz", - "integrity": "sha1-boC6KiI+sxFftM3WEgw5lNR+UI8=", + "integrity": "sha1-G+UlXTB0znQYK9a8AOfwjjJlFfg=", "requires": { "tslint-react": "3.6.0" } }, "@rush-temp/ssr-tests": { "version": "file:projects/ssr-tests.tgz", - "integrity": "sha1-zL75cJITYOt6FrpnPPxXnZ9FdvU=", + "integrity": "sha1-PUXWK9p8sCNng7Vf2UIPwQbK6aE=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/es6-promise": "0.0.32", @@ -1228,7 +1228,7 @@ }, "@rush-temp/styling": { "version": "file:projects/styling.tgz", - "integrity": "sha1-DLGThtJH+K9OjvMShJUUyCb5XLI=", + "integrity": "sha1-bU7aiLJFR1HjXVw2q2tBGj68kXU=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/jest": "23.0.0", @@ -1243,7 +1243,7 @@ }, "@rush-temp/test-bundle-button": { "version": "file:projects/test-bundle-button.tgz", - "integrity": "sha1-1bKw8OiCI/WLMU0bQddmx6kiD3g=", + "integrity": "sha1-oPrf+EyqDb4AE8FEpk/u5urCN4A=", "requires": { "@types/prop-types": "15.5.2", "@types/react": "16.3.16", @@ -1256,7 +1256,7 @@ }, "@rush-temp/todo-app": { "version": "file:projects/todo-app.tgz", - "integrity": "sha1-ev2jM20kpA4qyvU6OS0tBjV877Y=", + "integrity": "sha1-r7XJwf8An10KB9K2pJr2GLv3DdE=", "requires": { "@microsoft/load-themed-styles": "1.7.60", "@types/es6-promise": "0.0.32", @@ -1273,7 +1273,7 @@ }, "@rush-temp/utilities": { "version": "file:projects/utilities.tgz", - "integrity": "sha1-u2KqWW61hGbLWR8jqkBgpx5/aso=", + "integrity": "sha1-pQnP/iqIJxcGEcTu1Z/11vAOavI=", "requires": { "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", @@ -1293,7 +1293,7 @@ }, "@rush-temp/variants": { "version": "file:projects/variants.tgz", - "integrity": "sha1-36SoDbU/Fd3+BWR3yPkbEogmCtY=", + "integrity": "sha1-uXVefuEHNyjjhqGhQgQ9L0rQVPc=", "requires": { "@types/jest": "23.0.0", "tslib": "1.9.2" @@ -1301,7 +1301,7 @@ }, "@rush-temp/vr-tests": { "version": "file:projects/vr-tests.tgz", - "integrity": "sha1-hO74ZmwIozUcyP8I/zFRkozrbKc=", + "integrity": "sha1-S4Wf/Kubllfoe5fNd8k/Lpjyuxg=", "requires": { "@storybook/addon-options": "3.2.3", "@storybook/react": "3.4.6", diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index 6b14cd74bd8032..20fdf28357e22b 100644 --- a/common/config/rush/version-policies.json +++ b/common/config/rush/version-policies.json @@ -4,4 +4,4 @@ "definitionName": "individualVersion", "lockedMajor": 6 } -] +] \ No newline at end of file diff --git a/packages/charting/src/Utilities.ts b/packages/charting/src/Utilities.ts index 4661a875ed729f..cce14ea6abb0fe 100644 --- a/packages/charting/src/Utilities.ts +++ b/packages/charting/src/Utilities.ts @@ -1 +1 @@ -export * from 'office-ui-fabric-react/lib/Utilities'; +export * from 'office-ui-fabric-react/lib/Utilities'; \ No newline at end of file diff --git a/packages/charting/src/common/tests.ts b/packages/charting/src/common/tests.ts index e47f11fc76bfb2..12b909633fbf07 100644 --- a/packages/charting/src/common/tests.ts +++ b/packages/charting/src/common/tests.ts @@ -17,4 +17,4 @@ global.requestAnimationFrame = (callback: () => void) => { }; // Configure enzyme. -configure({ adapter: new Adapter() }); +configure({ adapter: new Adapter() }); \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index a44c3afbfca70c..0eda506ec586ba 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -4,12 +4,7 @@ import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } fr import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale'; import { select as d3Select } from 'd3-selection'; import { classNamesFunction, customizable, IClassNames } from '../../Utilities'; -import { - IVerticalBarChartProps, - IVerticalBarChartStyleProps, - IVerticalBarChartStyles, - IDataPoint -} from './VerticalBarChart.types'; +import { IVerticalBarChartProps, IVerticalBarChartStyleProps, IVerticalBarChartStyles, IDataPoint } from './VerticalBarChart.types'; const getClassNames = classNamesFunction(); type numericAxis = D3Axis; @@ -56,12 +51,14 @@ export class VerticalBarChartBase extends React.Component - {this.props.chartLabel &&

{this.props.chartLabel}

} - - this._setXAxis(node, xAxis)} className={this._classNames.xAxis} /> - this._setYAxis(node, yAxis)} className={this._classNames.yAxis} /> - {bars} +
+ { this.props.chartLabel &&

{ this.props.chartLabel }

} + + this._setXAxis(node, xAxis) } className={ this._classNames.xAxis } /> + this._setYAxis(node, yAxis) } className={ this._classNames.yAxis } /> + + { bars } +
); @@ -88,53 +85,43 @@ export class VerticalBarChartBase extends React.Component point.x as number)!; - const xAxisScale = d3ScaleLinear() - .domain([0, xMax]) - .range([0, this._width]); + const xMax = (d3Max(this._points, (point: IDataPoint) => point.x as number))!; + const xAxisScale = d3ScaleLinear().domain([0, xMax]).range([0, this._width]); const xAxis = d3AxisBottom(xAxisScale).ticks(10); return xAxis; } private _createStringXAxis(): stringAxis { - const xAxisScale = d3ScaleBand() - .domain(this._points.map((point: IDataPoint) => point.x as string)) - .range([0, this._width]); + const xAxisScale = d3ScaleBand().domain(this._points.map((point: IDataPoint) => point.x as string)).range([0, this._width]); const xAxis = d3AxisBottom(xAxisScale).tickFormat((x: string, index: number) => this._points[index].x as string); return xAxis; } private _createYAxis(): numericAxis { - const yMax = d3Max(this._points, (point: IDataPoint) => point.y)!; - const yAxisScale = d3ScaleLinear() - .domain([0, yMax]) - .range([this._height, 0]); + const yMax = (d3Max(this._points, (point: IDataPoint) => point.y))!; + const yAxisScale = d3ScaleLinear().domain([0, yMax]).range([this._height, 0]); const yAxis = d3AxisLeft(yAxisScale).ticks(this._yAxisTickCount); return yAxis; } private _createNumericBars(): JSX.Element[] { - const xMax = d3Max(this._points, (point: IDataPoint) => point.x as number)!; - const yMax = d3Max(this._points, (point: IDataPoint) => point.y)!; + const xMax = (d3Max(this._points, (point: IDataPoint) => point.x as number))!; + const yMax = (d3Max(this._points, (point: IDataPoint) => point.y))!; - const xBarScale = d3ScaleLinear() - .domain([0, xMax]) - .range([0, this._width - this._barWidth]); - const yBarScale = d3ScaleLinear() - .domain([0, yMax]) - .range([0, this._height]); + const xBarScale = d3ScaleLinear().domain([0, xMax]).range([0, this._width - this._barWidth]); + const yBarScale = d3ScaleLinear().domain([0, yMax]).range([0, this._height]); const colorScale = this._createColors(yMax); const bars = this._points.map((point: IDataPoint, index: number) => { return ( ); }); @@ -143,27 +130,25 @@ export class VerticalBarChartBase extends React.Component point.y)!; + const yMax = (d3Max(this._points, (point: IDataPoint) => point.y))!; const endpointDistance = 0.5 * (this._width / this._points.length); const xBarScale = d3ScaleLinear() .domain([0, this._points.length - 1]) .range([endpointDistance - 0.5 * this._barWidth, this._width - endpointDistance - 0.5 * this._barWidth]); - const yBarScale = d3ScaleLinear() - .domain([0, yMax]) - .range([0, this._height]); + const yBarScale = d3ScaleLinear().domain([0, yMax]).range([0, this._height]); const colorScale = this._createColors(yMax); const bars = this._points.map((point: IDataPoint, index: number) => { return ( ); }); @@ -177,9 +162,7 @@ export class VerticalBarChartBase extends React.Component() - .domain(domainValues) - .range(this._colors); + const colorScale = d3ScaleLinear().domain(domainValues).range(this._colors); return colorScale; } -} +} \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.styles.ts b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.styles.ts index 3c854e9a78c454..35ae5829fd92f0 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.styles.ts +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.styles.ts @@ -9,7 +9,7 @@ export const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChart const xOffset = 30; const yOffset = 20; - return { + return ({ root: [ 'ms-VerticalBarChart', className, @@ -32,10 +32,11 @@ export const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChart ], xAxis: [ { - transform: `translate(${xOffset}px, ${height}px)` + transform: `translate(${xOffset}px, ${height}px)`, } ], - xAxisTicks: [], + xAxisTicks: [ + ], yAxis: [ { transform: `translate(${yOffset}px, 0px)` @@ -56,5 +57,5 @@ export const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChart transform: `translate(${xOffset}px, 0px)` } ] - }; -}; + }); +}; \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx index 89e4b9e2b42db3..16e2f56dfba841 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx @@ -5,9 +5,12 @@ import { VerticalBarChart } from './VerticalBarChart'; describe('VerticalBarChart', () => { it('renders VerticalBarChart correctly', () => { - const points = [{ x: 0, y: 0 }, { x: 10, y: 10 }]; - const component = renderer.create(); + const points = [ + { x: 0, y: 0 }, + { x: 10, y: 10 } + ]; + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); -}); +}); \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.tsx index 939148d2456dfe..a027d2b3890437 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -1,5 +1,9 @@ import { styled } from '../../Utilities'; -import { IVerticalBarChartProps, IVerticalBarChartStyleProps, IVerticalBarChartStyles } from './VerticalBarChart.types'; +import { + IVerticalBarChartProps, + IVerticalBarChartStyleProps, + IVerticalBarChartStyles +} from './VerticalBarChart.types'; import { VerticalBarChartBase } from './VerticalBarChart.base'; import { getStyles } from './VerticalBarChart.styles'; @@ -7,4 +11,4 @@ import { getStyles } from './VerticalBarChart.styles'; export const VerticalBarChart = styled( VerticalBarChartBase, getStyles -); +); \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts index 239afea0f32392..b62accc60cade8 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts @@ -1,7 +1,9 @@ import { ITheme, IStyle } from '../../Styling'; import { IStyleFunctionOrObject } from '../../Utilities'; -export interface IVerticalBarChart {} +export interface IVerticalBarChart { + +} export interface IDataPoint { /** @@ -136,4 +138,4 @@ export interface IVerticalBarChartStyles { * Style for the element containing all the bars in the chart. */ bars?: IStyle; -} +} \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/examples/VerticalBarChart.Basic.Example.tsx b/packages/charting/src/components/VerticalBarChart/examples/VerticalBarChart.Basic.Example.tsx index 7c2fa4eeebd82a..8147f53ba77a95 100644 --- a/packages/charting/src/components/VerticalBarChart/examples/VerticalBarChart.Basic.Example.tsx +++ b/packages/charting/src/components/VerticalBarChart/examples/VerticalBarChart.Basic.Example.tsx @@ -12,9 +12,9 @@ export class VerticalBarChartBasicExample extends React.Component - {this._basicExample()} + { this._basicExample() }
- {this._styledExample()} + { this._styledExample() } ); } @@ -39,7 +39,7 @@ export class VerticalBarChartBasicExample extends React.Component; + return ; } private _styledExample(): JSX.Element { @@ -103,15 +103,14 @@ export class VerticalBarChartBasicExample extends React.Component - ); + data={ points } + width={ 800 } + height={ 400 } + barWidth={ 20 } + yAxisTickCount={ 6 } + styles={ customStyles } + colors={ customColors } + chartLabel={ 'Chart with Axis Labels and Custom Styles' } + />); } -} +} \ No newline at end of file diff --git a/packages/charting/src/components/VerticalBarChart/index.ts b/packages/charting/src/components/VerticalBarChart/index.ts index d230a2a19103ae..a6697162a8e270 100644 --- a/packages/charting/src/components/VerticalBarChart/index.ts +++ b/packages/charting/src/components/VerticalBarChart/index.ts @@ -1,2 +1,2 @@ export * from './VerticalBarChart'; -export * from './VerticalBarChart.types'; +export * from './VerticalBarChart.types'; \ No newline at end of file diff --git a/packages/charting/src/demo/AppDefinition.tsx b/packages/charting/src/demo/AppDefinition.tsx index a1758319ca9ac3..1dd5a0f1a226eb 100644 --- a/packages/charting/src/demo/AppDefinition.tsx +++ b/packages/charting/src/demo/AppDefinition.tsx @@ -5,7 +5,8 @@ import { App as AppBase, IAppDefinition, IAppProps } from '@uifabric/example-app export const AppDefinition: IAppDefinition = { appTitle: 'Fabric - React', - testPages: [], + testPages: [ + ], examplePages: [ { links: [ @@ -32,6 +33,7 @@ export const AppDefinition: IAppDefinition = { url: 'http://www.github.com/officedev' } ] + }; -export const App = (props: IAppProps) => ; +export const App = (props: IAppProps) => ; diff --git a/packages/charting/src/index.ts b/packages/charting/src/index.ts index 50b06c2495bf06..8b8d39b3a898ba 100644 --- a/packages/charting/src/index.ts +++ b/packages/charting/src/index.ts @@ -1 +1 @@ -export { VerticalBarChart } from './VerticalBarChart'; +export { VerticalBarChart } from './VerticalBarChart'; \ No newline at end of file diff --git a/packages/experiments/src/components/Nav/Nav.tsx b/packages/experiments/src/components/Nav/Nav.tsx index 26050bdeb1c851..fc3ae6f726da30 100644 --- a/packages/experiments/src/components/Nav/Nav.tsx +++ b/packages/experiments/src/components/Nav/Nav.tsx @@ -38,9 +38,9 @@ class NavComponent extends NavBase { return ( ); } @@ -108,21 +108,21 @@ class NavComponent extends NavBase { return ( ); } @@ -142,16 +142,16 @@ class NavComponent extends NavBase { link.disableAutoExpand = false; return ( -
  • - {this._renderCompositeLink(link, linkIndex, nestingLevel)} +
  • + { this._renderCompositeLink(link, linkIndex, nestingLevel) } {// show child links - // 1. only for the first level and - // 2. if the link is expanded - nestingLevel == 0 && link.isExpanded ? ( -
    - {this._renderLinks(link.links as INavLink[], ++nestingLevel)} -
    - ) : null} + // 1. only for the first level and + // 2. if the link is expanded + nestingLevel == 0 && link.isExpanded ? ( +
    + { this._renderLinks(link.links as INavLink[], ++nestingLevel) } +
    + ) : null }
    • ); } @@ -165,7 +165,7 @@ class NavComponent extends NavBase { return (
      - {links.map((link: INavLink, linkIndex: number) => { + { links.map((link: INavLink, linkIndex: number) => { if (enableCustomization && link.isHidden && !showMore) { // atleast one link is hidden this._hasAtleastOneHiddenLink = true; @@ -178,7 +178,7 @@ class NavComponent extends NavBase { } else { return this._renderLink(link, linkIndex, nestingLevel); } - })} + }) }
    ); } @@ -205,15 +205,15 @@ class NavComponent extends NavBase { } return ( -
    - {isGroupHeaderVisible ? ( -
    -
    - {group.name ? {group.name} : null} +
    + { isGroupHeaderVisible ? ( +
    +
    + { group.name ? { group.name } : null }
    - ) : null} - {this._renderLinks(group.links, 0 /* nestingLevel */)} + ) : null } + { this._renderLinks(group.links, 0 /* nestingLevel */) }
    ); } diff --git a/packages/experiments/src/components/Nav/NavBase.tsx b/packages/experiments/src/components/Nav/NavBase.tsx index 2a0eca2f56f831..375bf453172260 100644 --- a/packages/experiments/src/components/Nav/NavBase.tsx +++ b/packages/experiments/src/components/Nav/NavBase.tsx @@ -71,10 +71,8 @@ export class NavBase extends React.Component implements IN return false; } - return links.some( - (link: INavLink): boolean => { - return !link.isHidden; - } - ); + return links.some((link: INavLink): boolean => { + return !link.isHidden; + }); } } diff --git a/packages/experiments/src/components/Nav/SlimNav.tsx b/packages/experiments/src/components/Nav/SlimNav.tsx index f73a2c7d3c667b..741dfe175e988f 100644 --- a/packages/experiments/src/components/Nav/SlimNav.tsx +++ b/packages/experiments/src/components/Nav/SlimNav.tsx @@ -44,9 +44,9 @@ class SlimNavComponent extends NavBase { return ( ); } @@ -162,19 +162,19 @@ class SlimNavComponent extends NavBase { return ( ); } @@ -187,11 +187,11 @@ class SlimNavComponent extends NavBase { const linkText = this.getLinkText(link, this.props.showMore); return ( -
  • - {this._renderCompositeLink(link, linkIndex, nestingLevel)} +
  • + { this._renderCompositeLink(link, linkIndex, nestingLevel) } {// show child links - // 1. only for the first level - nestingLevel == 0 ?
    {this._renderFloatingLinks(link.links as INavLink[], ++nestingLevel)}
    : null} + // 1. only for the first level + nestingLevel == 0 ?
    { this._renderFloatingLinks(link.links as INavLink[], ++nestingLevel) }
    : null }
    • ); } @@ -203,9 +203,9 @@ class SlimNavComponent extends NavBase { return (
      - {links.map((link: INavLink, linkIndex: number) => { + { links.map((link: INavLink, linkIndex: number) => { return this._renderFloatingLink(link, linkIndex, nestingLevel); - })} + }) }
    ); } @@ -220,8 +220,8 @@ class SlimNavComponent extends NavBase { const classNames = getClassNames(styles!, { hasChildren, scrollTop: link.scrollTop }); return ( -
    - {this._renderFloatingLinks([link], 0 /* nestingLevel */)} +
    + { this._renderFloatingLinks([link], 0 /* nestingLevel */) }
    ); } @@ -242,27 +242,27 @@ class SlimNavComponent extends NavBase { return (
  • - {this._renderFloatingNav(link, linkIndex)} + { this._renderFloatingNav(link, linkIndex) }
    • ); } @@ -276,7 +276,7 @@ class SlimNavComponent extends NavBase { return (
      - {links.map((link: INavLink, linkIndex: number) => { + { links.map((link: INavLink, linkIndex: number) => { if (enableCustomization && link.isHidden && !showMore) { // atleast one link is hidden this._hasAtleastOneHiddenLink = true; @@ -289,7 +289,7 @@ class SlimNavComponent extends NavBase { } else { return this._renderLink(link, linkIndex, nestingLevel); } - })} + }) }
    ); } @@ -308,6 +308,7 @@ class SlimNavComponent extends NavBase { const classNames = getClassNames(styles!, {}); + let isGroupHeaderVisible = false; // first group header is hidden by default, display group header for other groups only if there are visible links @@ -316,14 +317,14 @@ class SlimNavComponent extends NavBase { } return ( -
    +
    {// do not render group header for the first group - isGroupHeaderVisible ? ( -
    -
    -
    - ) : null} - {this._renderLinks(group.links, 0 /* nestingLevel */)} + isGroupHeaderVisible ? ( +
    +
    +
    + ) : null } + { this._renderLinks(group.links, 0 /* nestingLevel */) }
    ); } diff --git a/packages/experiments/src/components/Tile/index.ts b/packages/experiments/src/components/Tile/index.ts index 232f04cf36ca75..37874e9e0d8757 100644 --- a/packages/experiments/src/components/Tile/index.ts +++ b/packages/experiments/src/components/Tile/index.ts @@ -1,4 +1,4 @@ export * from './Tile.types'; export * from './Tile'; export * from './ShimmerTile/ShimmerTile'; -export * from './ShimmerTile/ShimmerTile.types'; +export * from './ShimmerTile/ShimmerTile.types'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index 2df3c5b1aa00dc..f4f54ae6cc912d 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -34,17 +34,22 @@ export const ActivityItemPageProps: IDemoPageProps = { } ], propertiesTablesSources: [ - require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts') + require< + string + >('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts') ], overview: require< string >('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md'), bestPractices: '', - dos: require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md'), - donts: require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md'), + dos: require< + string + >('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md'), + donts: require< + string + >('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md'), isHeaderVisible: true }; -export const ActivityItemPage = (props: { isHeaderVisible: boolean }) => ( - -); +export const ActivityItemPage = (props: { isHeaderVisible: boolean }) => + ; diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx index 7dae1f69c9bd16..828f7bca0e14e5 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx @@ -240,10 +240,10 @@ export class CalloutContentBase extends BaseComponent> protected suggestionsControl: SuggestionsControl; protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl< T - > = SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; + > = SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; protected loadingTimer: number | undefined; // tslint:disable-next-line:no-any protected currentPromise: PromiseLike; @@ -41,7 +41,7 @@ export class BaseFloatingPicker> this.suggestionStore = basePickerProps.suggestionsStore; this.state = { queryString: '', - didBind: false + didBind: false, }; } @@ -137,8 +137,8 @@ export class BaseFloatingPicker> public render(): JSX.Element { const { className } = this.props; return ( -
    - {this.renderSuggestions()} +
    + { this.renderSuggestions() }
    ); } @@ -147,23 +147,23 @@ export class BaseFloatingPicker> const TypedSuggestionsControl = this.SuggestionsControlOfProperType; return this.state.suggestionsVisible ? ( ) : null; @@ -204,6 +204,7 @@ export class BaseFloatingPicker> this.updateSuggestions(suggestionsArray, true /*forceUpdate*/); } } else if (suggestionsPromiseLike && suggestionsPromiseLike.then) { + this._updateSuggestionsVisible(updatedValue !== undefined && updatedValue !== ''); // Ensure that the promise will only use the callback if it was the most recent one. diff --git a/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx index ec22ab0a23dd39..6a1a7f3e7237ca 100644 --- a/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx @@ -23,35 +23,35 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { public render(): JSX.Element { return ( -
    - - {this._renderExtendedPicker()} +
    + + { this._renderExtendedPicker() }
    ); } private _renderExtendedPicker(): JSX.Element { return ( -
    +
    -
    + ); } private _onRenderItem = (props: ISelectedPeopleItemProps): JSX.Element => { - return ; - }; + return ; + } private _setComponentRef = (component: SelectedPeopleList): void => { this._selectionList = component; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx index e634023b03bfbe..685349420e8c2c 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx @@ -325,10 +325,10 @@ describe('SpinButton', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); diff --git a/packages/utilities/src/focus.ts b/packages/utilities/src/focus.ts index de35c0386dd7cc..a27e354e94c170 100644 --- a/packages/utilities/src/focus.ts +++ b/packages/utilities/src/focus.ts @@ -17,14 +17,8 @@ export function getFirstFocusable( currentElement: HTMLElement, includeElementsInFocusZones?: boolean ): HTMLElement | null { - return getNextElement( - rootElement, - currentElement, - true /*checkNode*/, - false /*suppressParentTraversal*/, - false /*suppressChildTraversal*/, - includeElementsInFocusZones - ); + return getNextElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, + false /*suppressChildTraversal*/, includeElementsInFocusZones); } /** @@ -37,14 +31,8 @@ export function getLastFocusable( currentElement: HTMLElement, includeElementsInFocusZones?: boolean ): HTMLElement | null { - return getPreviousElement( - rootElement, - currentElement, - true /*checkNode*/, - false /*suppressParentTraversal*/, - true /*traverseChildren*/, - includeElementsInFocusZones - ); + return getPreviousElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, + true /*traverseChildren*/, includeElementsInFocusZones); } /** @@ -59,18 +47,10 @@ export function getLastFocusable( export function getFirstTabbable( rootElement: HTMLElement, currentElement: HTMLElement, - includeElementsInFocusZones?: boolean -): HTMLElement | null { - return getNextElement( - rootElement, - currentElement, - true /*checkNode*/, - false /*suppressParentTraversal*/, - false /*suppressChildTraversal*/, - includeElementsInFocusZones, - false /*allowFocusRoot*/, - true /*tabbable*/ - ); + includeElementsInFocusZones?: boolean): HTMLElement | null { + + return getNextElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, + false /*suppressChildTraversal*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/); } /** @@ -87,16 +67,8 @@ export function getLastTabbable( currentElement: HTMLElement, includeElementsInFocusZones?: boolean ): HTMLElement | null { - return getPreviousElement( - rootElement, - currentElement, - true /*checkNode*/, - false /*suppressParentTraversal*/, - true /*traverseChildren*/, - includeElementsInFocusZones, - false /*allowFocusRoot*/, - true /*tabbable*/ - ); + return getPreviousElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, + true /*traverseChildren*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/); } /** diff --git a/scripts/code-style.js b/scripts/code-style.js index eb0ecf8e3abb4b..f95cc360d59ceb 100644 --- a/scripts/code-style.js +++ b/scripts/code-style.js @@ -1,5 +1,8 @@ const runTasks = require('./run-task'); -let tasks = ['prettier', 'tslint']; +let tasks = [ + 'prettier', + 'tslint' +]; runTasks(tasks); diff --git a/scripts/lint-staged/tslint.js b/scripts/lint-staged/tslint.js index a54a6c2b2f7360..0e92abbae4df0d 100644 --- a/scripts/lint-staged/tslint.js +++ b/scripts/lint-staged/tslint.js @@ -21,8 +21,10 @@ runTsLintOnFilesGroupedPerPackage(groupFilesByPackage(files)); function groupFilesByPackage(files) { const rootDirectory = path.join(path.resolve(__dirname, '..', '..'), path.sep); + + return files - .map(fileName => { + .map((fileName) => { const parts = fileName.replace(rootDirectory, '').split(path.sep); const packageRoot = [parts[0], parts[1]].join(path.sep); diff --git a/scripts/run-task.js b/scripts/run-task.js index a9f4d245cc88a4..ba13921c29506e 100644 --- a/scripts/run-task.js +++ b/scripts/run-task.js @@ -40,18 +40,15 @@ module.exports = function runTasks(tasks) { function runTask(task) { let taskStartTime = new Date().getTime(); - return Promise.resolve().then( - () => - !hasFailures && - Promise.resolve() - .then(() => logStartTask(packageName, task)) - .then(() => require('./tasks/' + task)({ isProduction, argv: process.argv })) - .then(() => logEndTask(packageName, task, taskStartTime)) - .catch(e => { - hasFailures = true; - logEndTask(packageName, task, taskStartTime, e); - }) - ); + return Promise.resolve() + .then(() => !hasFailures && Promise.resolve() + .then(() => logStartTask(packageName, task)) + .then(() => require('./tasks/' + task)({ isProduction, argv: process.argv })) + .then(() => logEndTask(packageName, task, taskStartTime)) + .catch((e) => { + hasFailures = true; + logEndTask(packageName, task, taskStartTime, e); + })); } function getPackage() { @@ -63,4 +60,4 @@ module.exports = function runTasks(tasks) { return undefined; } -}; +} \ No newline at end of file diff --git a/scripts/tasks/jest.js b/scripts/tasks/jest.js index 08d0a594392bbe..c63cc86b9b1a1c 100644 --- a/scripts/tasks/jest.js +++ b/scripts/tasks/jest.js @@ -1,4 +1,4 @@ -module.exports = function(options) { +module.exports = function (options) { const path = require('path'); const fs = require('fs'); const exec = require('../exec-sync'); @@ -28,13 +28,11 @@ module.exports = function(options) { options.isProduction && '--coverage', // If the -u flag is passed, pass it through. - options.argv && options.argv.indexOf('-u') >= 0 ? '-u' : '', + (options.argv && options.argv.indexOf('-u') >= 0) ? '-u' : '', // Pass in custom arguments. options.args - ] - .filter(arg => !!arg) - .join(' '); + ].filter(arg => !!arg).join(' '); const command = `node ${jestPath} ${args}`;