From f37ea42b401f55ec9a7e223c90ec653b5aa6d827 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 31 Jan 2018 17:52:38 -0800 Subject: [PATCH 001/284] Theme Generator: fix neutral colors (#3855) * fix colors * change file --- .../phkuo-fixAlgo_2018-02-01-00-41.json | 11 +++++++++++ .../components/ThemeGenerator/ThemeRulesStandard.ts | 4 ++-- .../src/utilities/color/shades.ts | 4 ++-- 3 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json diff --git a/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json b/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json new file mode 100644 index 00000000000000..9c196422e9ecc6 --- /dev/null +++ b/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Theme Generator: fix autogenerated neutral colors", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "phkuo@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts index 38a122110f2051..0211f02aac1dcd 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts @@ -149,8 +149,8 @@ export function themeRulesStandardCreator() { _makeFabricSlotRule(FabricSlots[FabricSlots.neutralQuaternary], BaseSlots.backgroundColor, Shade.Shade5, true); _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiaryAlt], BaseSlots.backgroundColor, Shade.Shade6, true); // bg6 or fg2 _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiary], BaseSlots.foregroundColor, Shade.Shade3); - _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondary], BaseSlots.foregroundColor, Shade.Shade5); - _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimaryAlt], BaseSlots.foregroundColor, Shade.Shade6); + _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondary], BaseSlots.foregroundColor, Shade.Shade4); + _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimaryAlt], BaseSlots.foregroundColor, Shade.Shade5); _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimary], BaseSlots.foregroundColor, Shade.Unshaded); _makeFabricSlotRule(FabricSlots[FabricSlots.neutralDark], BaseSlots.foregroundColor, Shade.Shade7); diff --git a/packages/office-ui-fabric-react/src/utilities/color/shades.ts b/packages/office-ui-fabric-react/src/utilities/color/shades.ts index 8a5178887ca353..c3278c90aaa02d 100644 --- a/packages/office-ui-fabric-react/src/utilities/color/shades.ts +++ b/packages/office-ui-fabric-react/src/utilities/color/shades.ts @@ -19,8 +19,8 @@ const WhiteShadeTable = [.463, .651, .784, .816, .855, .918, .957, .973]; // whi const BlackTintTable = [.463, .55, .651, .784, .816, .855, .918, .957]; // black fg const LumTintTable = [.12, .23, .34, .45, .56, .67, .78, .89]; // light (strongen all) const LumShadeTable = [.89, .78, .67, .56, .45, .34, .23, .12]; // dark (soften all) -const ColorTintTable = [.050, .100, .200, .42, .90]; // default soften -const ColorShadeTable = [.90, .70, .550]; // default strongen +const ColorTintTable = [.07, .18, .436, .751, .956]; // default soften +const ColorShadeTable = [.90, .64, .550]; // default strongen // If the given shade's luminance is below/above these values, we'll swap to using the White/Black tables above const c_LuminanceLow = 0.2; From 693dcf74a3a73de7ff042473ad689f3b3a331e37 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Thu, 1 Feb 2018 03:23:18 -0800 Subject: [PATCH 002/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- ...-icon-config-update2_2018-01-31-22-05.json | 11 ------ ...eshpande-icon-update_2018-01-24-23-44.json | 11 ------ ...controlled-textfield_2018-01-24-23-29.json | 11 ------ .../phkuo-fixAlgo_2018-02-01-00-41.json | 11 ------ .../selection-modal_2018-01-30-15-24.json | 11 ------ .../stick-bgc-3776_2018-01-29-23-43.json | 11 ------ packages/experiments/package.json | 4 +-- packages/icons/CHANGELOG.json | 19 +++++++++++ packages/icons/CHANGELOG.md | 10 +++++- packages/icons/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 34 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 12 ++++++- packages/office-ui-fabric-react/package.json | 4 +-- 14 files changed, 79 insertions(+), 74 deletions(-) delete mode 100644 common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json delete mode 100644 common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json delete mode 100644 common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json delete mode 100644 common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json delete mode 100644 common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json delete mode 100644 common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index fb05e91dcafa99..cb67d96d7983bc 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.45.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json b/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json deleted file mode 100644 index 4ce5961009beac..00000000000000 --- a/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/icons", - "comment": "updating config files in @uifabric/icons package", - "type": "patch" - } - ], - "packageName": "@uifabric/icons", - "email": "srdeshpa@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json b/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json deleted file mode 100644 index 6fcb96111e0ebc..00000000000000 --- a/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/icons", - "comment": "Updating fabric icons in office-ui-fabric-react's @uifabric/icons package", - "type": "patch" - } - ], - "packageName": "@uifabric/icons", - "email": "srdeshpa@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json b/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json deleted file mode 100644 index 7a07c28b30bbcf..00000000000000 --- a/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json b/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json deleted file mode 100644 index 9c196422e9ecc6..00000000000000 --- a/common/changes/office-ui-fabric-react/phkuo-fixAlgo_2018-02-01-00-41.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Theme Generator: fix autogenerated neutral colors", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "phkuo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json b/common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json deleted file mode 100644 index 8c3438eeae852b..00000000000000 --- a/common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix bug in modal selection handling", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json b/common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json deleted file mode 100644 index de7f060b2fb53e..00000000000000 --- a/common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-brgarl@microsoft.com" -} \ No newline at end of file diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 54932f82bea6f0..0421f7addd6ceb 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -44,8 +44,8 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.45.1 <6.0.0", - "@uifabric/icons": ">=5.4.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.2 <6.0.0", + "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/icons/CHANGELOG.json b/packages/icons/CHANGELOG.json index b77224eddf7cf5..9853429310c50f 100644 --- a/packages/icons/CHANGELOG.json +++ b/packages/icons/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/icons", "entries": [ + { + "version": "5.4.2", + "tag": "@uifabric/icons_v5.4.2", + "date": "Thu, 01 Feb 2018 11:23:17 GMT", + "comments": { + "patch": [ + { + "author": "Srikanth Deshpande ", + "commit": "952ad7979322352ca597d4e6319391529d5d2212", + "comment": "updating config files in @uifabric/icons package" + }, + { + "author": "Srikanth Deshpande ", + "commit": "66a91aadb99bca3923125d62cadc15984dba0be6", + "comment": "Updating fabric icons in office-ui-fabric-react's @uifabric/icons package" + } + ] + } + }, { "version": "5.4.1", "tag": "@uifabric/icons_v5.4.1", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 41811b8733de01..dd9cdf3e8ef045 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log - @uifabric/icons -This log was last generated on Mon, 29 Jan 2018 11:23:40 GMT and should not be manually modified. +This log was last generated on Thu, 01 Feb 2018 11:23:17 GMT and should not be manually modified. + +## 5.4.2 +Thu, 01 Feb 2018 11:23:17 GMT + +### Patches + +- updating config files in @uifabric/icons package +- Updating fabric icons in office-ui-fabric-react's @uifabric/icons package ## 5.4.1 Mon, 29 Jan 2018 11:23:40 GMT diff --git a/packages/icons/package.json b/packages/icons/package.json index 7b87ae1fe5dcb8..0718fae836e2b6 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/icons", - "version": "5.4.1", + "version": "5.4.2", "description": "Office UI Fabric icon set.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 6ed5890e8e6865..0946b11c331a05 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,40 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.45.2", + "tag": "office-ui-fabric-react_v5.45.2", + "date": "Thu, 01 Feb 2018 11:23:17 GMT", + "comments": { + "patch": [ + { + "author": "Jordan Janzen ", + "commit": "b17a45fe057f50aa489be21d3e517d783b40b9e1", + "comment": "Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs." + }, + { + "author": "Philip Kuo ", + "commit": "f37ea42b401f55ec9a7e223c90ec653b5aa6d827", + "comment": "Theme Generator: fix autogenerated neutral colors" + }, + { + "author": "Thomas Michon ", + "commit": "c304b01fa7c0a98e54dc1c9af67c6a0d695838e8", + "comment": "Fix bug in modal selection handling" + }, + { + "author": "Brian Garland ", + "commit": "ddc544059e61523a8294b16275ae2e8706241e4f", + "comment": "added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/icons\" from `>=5.4.1 <6.0.0` to `>=5.4.2 <6.0.0`" + } + ] + } + }, { "version": "5.45.1", "tag": "office-ui-fabric-react_v5.45.1", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 775681a12afdbc..b8661c8aa3cfc3 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,16 @@ # Change Log - office-ui-fabric-react -This log was last generated on Wed, 31 Jan 2018 11:11:59 GMT and should not be manually modified. +This log was last generated on Thu, 01 Feb 2018 11:23:17 GMT and should not be manually modified. + +## 5.45.2 +Thu, 01 Feb 2018 11:23:17 GMT + +### Patches + +- Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs. +- Theme Generator: fix autogenerated neutral colors +- Fix bug in modal selection handling +- added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component. ## 5.45.1 Wed, 31 Jan 2018 11:11:59 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 7a28ef220fe848..973fbd9aa4ed6b 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.45.1", + "version": "5.45.2", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -48,7 +48,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/icons": ">=5.4.1 <6.0.0", + "@uifabric/icons": ">=5.4.2 <6.0.0", "@uifabric/merge-styles": ">=5.11.0 <6.0.0", "@uifabric/styling": ">=5.17.0 <6.0.0", "@uifabric/utilities": ">=5.9.0 <6.0.0", From 78c61efde3fb8ba11d5124adca4934f823094747 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 1 Feb 2018 11:20:29 -0800 Subject: [PATCH 003/284] ActivityItemExample mergeStyles Converstion (#3844) migrated ActivityItemExample to use mergestyles instead of scss --- ...tyItemEx-mergestyles_2018-01-31-00-28.json | 11 ++ .../ActivityItem/ActivityItemPage.tsx | 1 - .../examples/ActivityItem.Basic.Example.tsx | 91 +++++---- .../examples/ActivityItem.Compact.Example.tsx | 111 ++++++----- .../examples/ActivityItem.Example.scss | 9 - .../examples/ActivityItem.Example.styles.ts | 23 +++ .../examples/ActivityItem.Persona.Example.tsx | 183 +++++++++--------- 7 files changed, 240 insertions(+), 189 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json delete mode 100644 packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss create mode 100644 packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts diff --git a/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json b/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json new file mode 100644 index 00000000000000..8f965fe1344812 --- /dev/null +++ b/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ 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 156563f8dbb9b6..c84fdf7a6ec9b6 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -5,7 +5,6 @@ import { IComponentDemoPageProps, PropertiesTableSet } from '@uifabric/example-app-base'; -import './examples/ActivityItem.Example.scss'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ActivityItemStatus } from './ActivityItem.checklist'; import { ActivityItemBasicExample } from './examples/ActivityItem.Basic.Example'; diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx index bd9ddf41104c79..183891565cf458 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx @@ -1,57 +1,66 @@ /* tslint:disable:no-unused-variable */ import * as React from 'react'; /* tslint:enable:no-unused-variable */ +import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; +import { + getStyles, + IActivityItemExampleStyleProps, + IActivityItemExampleStyles +} from './ActivityItem.Example.styles'; import { Icon } from '../../../Icon'; import { Link } from '../../../Link'; -// tslint:disable:jsx-no-lambda -const activityItemExamples = [ - { - key: 1, - activityDescription: [ - { alert('A name was clicked.'); } } >Philippe Lampros, - commented - ], - activityIcon: , - comments: [ - Hello! I am making a comment and mentioning , - { alert('An @mentioned name was clicked.'); } } >@Anđela Debeljak, - in the text of the comment. - ], - timeStamp: 'Just now' - }, - { - key: 2, - activityDescription: [ - { alert('A name was clicked.'); } } >Lisha Refai, - deleted , - DocumentTitle.docx - ], - activityIcon: , - timeStamp: '2 hours ago' - }, - { - key: 3, - activityDescription: [ - { alert('A name was clicked.'); } } >Julian Arvidsson, - moved , - { alert('A document was clicked.'); } } >PresentationTitle.pptx, - to , - { alert('A folder was clicked.'); } } >Destination Folder - ], - activityIcon: , - timeStamp: 'Yesterday' - } -]; - export class ActivityItemBasicExample extends React.Component, {}> { public render() { + const getClassNames = classNamesFunction(); + const classNames = getClassNames(getStyles); + + // tslint:disable:jsx-no-lambda + const activityItemExamples = [ + { + key: 1, + activityDescription: [ + { alert('A name was clicked.'); } } >Philippe Lampros, + commented + ], + activityIcon: , + comments: [ + Hello! I am making a comment and mentioning , + { alert('An @mentioned name was clicked.'); } } >@Anđela Debeljak, + in the text of the comment. + ], + timeStamp: 'Just now' + }, + { + key: 2, + activityDescription: [ + { alert('A name was clicked.'); } } >Lisha Refai, + deleted , + DocumentTitle.docx + ], + activityIcon: , + timeStamp: '2 hours ago' + }, + { + key: 3, + activityDescription: [ + { alert('A name was clicked.'); } } >Julian Arvidsson, + moved , + { alert('A document was clicked.'); } } >PresentationTitle.pptx, + to , + { alert('A folder was clicked.'); } } >Destination Folder + ], + activityIcon: , + timeStamp: 'Yesterday' + } + ]; + let activityExampleList: Array = []; activityItemExamples.forEach((item) => { let props = item; activityExampleList.push( - + ); }); diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx index 335079872144d5..1f845e585933bc 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx @@ -1,73 +1,82 @@ /* tslint:disable:no-unused-variable */ import * as React from 'react'; /* tslint:enable:no-unused-variable */ +import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; +import { + getStyles, + IActivityItemExampleStyleProps, + IActivityItemExampleStyles +} from './ActivityItem.Example.styles'; import { TestImages } from '../../../common/TestImages'; import { Icon } from '../../../Icon'; -const activityItemExamples = [ - { - key: 1, - activityDescription: [ - Tahlia Whittle, - edited this file - ], - activityPersonas: [ +export class ActivityItemCompactExample extends React.Component, {}> { + public render() { + const getClassNames = classNamesFunction(); + const classNames = getClassNames(getStyles); + + const activityItemExamples = [ { - imageUrl: TestImages.personaFemale - } - ], - isCompact: true - }, - { - key: 2, - activityDescription: [ - Patrick Loton, - and , - 6 others - ], - activityPersonas: [ + key: 1, + activityDescription: [ + Tahlia Whittle, + edited this file + ], + activityPersonas: [ + { + imageUrl: TestImages.personaFemale + } + ], + isCompact: true + }, { - imageInitials: 'PT', - primaryText: 'Robert Larsson' + key: 2, + activityDescription: [ + Patrick Loton, + and , + 6 others + ], + activityPersonas: [ + { + imageInitials: 'PT', + primaryText: 'Robert Larsson' + }, + { + imageUrl: TestImages.personaMale + }, + { + imageInitials: 'EC', + primaryText: 'Eduarda Costa' + } + ], + isCompact: true }, { - imageUrl: TestImages.personaMale + key: 3, + activityDescription: [ + Sabrina De Luca, + added this file + ], + activityIcon: React.createElement(Icon, { iconName: 'Add' }), + isCompact: true }, { - imageInitials: 'EC', - primaryText: 'Eduarda Costa' + key: 4, + activityDescription: [ + Chuan Rojumanong, + shared this file + ], + activityIcon: React.createElement(Icon, { iconName: 'Share' }), + isCompact: true } - ], - isCompact: true - }, - { - key: 3, - activityDescription: [ - Sabrina De Luca, - added this file - ], - activityIcon: React.createElement(Icon, { iconName: 'Add' }), - isCompact: true - }, - { - key: 4, - activityDescription: [ - Chuan Rojumanong, - shared this file - ], - activityIcon: React.createElement(Icon, { iconName: 'Share' }), - isCompact: true - } -]; + ]; -export class ActivityItemCompactExample extends React.Component, {}> { - public render() { let activityExampleList: Array = []; activityItemExamples.forEach((item) => { let props = item; activityExampleList.push( - + ); }); diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss deleted file mode 100644 index fd944b732c7d83..00000000000000 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss +++ /dev/null @@ -1,9 +0,0 @@ -:global { - .ms-activityItem-exampleRoot { - margin-top: 20px; - } - - .ms-activityItem-nameText { - font-weight: bold; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts new file mode 100644 index 00000000000000..ac1d9912c43cc1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts @@ -0,0 +1,23 @@ +import { IStyle } from '../../../Styling'; + +export interface IActivityItemExampleStyleProps { + /** + * 404 No Style Props Found + */ +} + +export interface IActivityItemExampleStyles { + exampleRoot?: IStyle; + nameText?: IStyle; +} + +export const getStyles = (props: IActivityItemExampleStyleProps): IActivityItemExampleStyles => { + return ({ + exampleRoot: { + marginTop: '20px' + }, + nameText: { + fontWeight: 'bold' + } + }); +}; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx index 289fe84e5a7f33..7087b67f512a28 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx @@ -1,110 +1,119 @@ /* tslint:disable:no-unused-variable */ import * as React from 'react'; /* tslint:enable:no-unused-variable */ +import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; +import { + getStyles, + IActivityItemExampleStyleProps, + IActivityItemExampleStyles +} from './ActivityItem.Example.styles'; import { TestImages } from '../../../common/TestImages'; import { Link } from '../../../Link'; -// tslint:disable:jsx-no-lambda -const activityItemExamples = [ - { - key: 1, - activityDescription: [ - { alert('A name was clicked.'); } } >Jack Howden, - renamed , - DocumentTitle.docx - ], - activityPersonas: [ - { - imageUrl: TestImages.personaMale - } - ], - comments: 'Hello, this is the text of my basic comment!', - timeStamp: '23m ago' - }, - { - key: 2, - activityDescription: [ - { alert('A name was clicked.'); } } >Javiera Márquez, - and , - { alert('A name was clicked.'); } } >Amelia Povalіy, - edited , - { alert('A document was clicked.'); } } >SpreadsheetTitle.xlsx - ], - activityPersonas: [ - { - imageInitials: 'JM', - primaryText: 'Javiera Márquez' - }, - { - imageUrl: TestImages.personaFemale - } - ], - timeStamp: '9:27 am' - }, - { - key: 3, - activityDescription: [ - { alert('A name was clicked.'); } } >Robert Larsson, - and , - { alert('A name was clicked.'); } } >2 others, - commented - ], - activityPersonas: [ - { - imageInitials: 'RL', - primaryText: 'Robert Larsson' - }, - { - imageUrl: TestImages.personaMale - }, - { - imageUrl: TestImages.personaFemale - } - ], - timeStamp: '3 days ago' - }, - { - key: 4, - activityDescription: [ - { alert('A name was clicked.'); } } >Jin Cheng, - and , - { alert('A name was clicked.'); } } >5 others, - edited this file - ], - activityPersonas: [ - { - imageInitials: 'JC', - primaryText: 'Jin Cheng' - }, - { - imageUrl: TestImages.personaMale - }, +export class ActivityItemPersonaExample extends React.Component, {}> { + public render() { + const getClassNames = classNamesFunction(); + const classNames = getClassNames(getStyles); + + // tslint:disable:jsx-no-lambda + const activityItemExamples = [ { - imageInitials: 'AL', - primaryText: 'Annie Lindqvist' + key: 1, + activityDescription: [ + { alert('A name was clicked.'); } } >Jack Howden, + renamed , + DocumentTitle.docx + ], + activityPersonas: [ + { + imageUrl: TestImages.personaMale + } + ], + comments: 'Hello, this is the text of my basic comment!', + timeStamp: '23m ago' }, { - imageUrl: TestImages.personaFemale + key: 2, + activityDescription: [ + { alert('A name was clicked.'); } } >Javiera Márquez, + and , + { alert('A name was clicked.'); } } >Amelia Povalіy, + edited , + { alert('A document was clicked.'); } } >SpreadsheetTitle.xlsx + ], + activityPersonas: [ + { + imageInitials: 'JM', + primaryText: 'Javiera Márquez' + }, + { + imageUrl: TestImages.personaFemale + } + ], + timeStamp: '9:27 am' }, { - imageUrl: TestImages.personaMale + key: 3, + activityDescription: [ + { alert('A name was clicked.'); } } >Robert Larsson, + and , + { alert('A name was clicked.'); } } >2 others, + commented + ], + activityPersonas: [ + { + imageInitials: 'RL', + primaryText: 'Robert Larsson' + }, + { + imageUrl: TestImages.personaMale + }, + { + imageUrl: TestImages.personaFemale + } + ], + timeStamp: '3 days ago' }, { - imageUrl: TestImages.personaMale + key: 4, + activityDescription: [ + { alert('A name was clicked.'); } } >Jin Cheng, + and , + { alert('A name was clicked.'); } } >5 others, + edited this file + ], + activityPersonas: [ + { + imageInitials: 'JC', + primaryText: 'Jin Cheng' + }, + { + imageUrl: TestImages.personaMale + }, + { + imageInitials: 'AL', + primaryText: 'Annie Lindqvist' + }, + { + imageUrl: TestImages.personaFemale + }, + { + imageUrl: TestImages.personaMale + }, + { + imageUrl: TestImages.personaMale + } + ], + timeStamp: 'August 3, 2017' } - ], - timeStamp: 'August 3, 2017' - } -]; + ]; -export class ActivityItemPersonaExample extends React.Component, {}> { - public render() { let activityExampleList: Array = []; activityItemExamples.forEach((item) => { let props = item; activityExampleList.push( - + ); }); From e799f4f15311dcd6c4de5f3934148239da8f7b30 Mon Sep 17 00:00:00 2001 From: John Miller Date: Thu, 1 Feb 2018 14:04:45 -0800 Subject: [PATCH 004/284] Revert "Controlled TextFields" (#3854) * Revert "Updating config files in @uifabric/icons package (#3851)" This reverts commit 952ad7979322352ca597d4e6319391529d5d2212. * Revert "Addressing Issue #3776 - Sticky component loops forever if background-color is not set for page (#3833)" This reverts commit ddc544059e61523a8294b16275ae2e8706241e4f. * Revert "Fix issue in modal Selection handling (#3836)" This reverts commit c304b01fa7c0a98e54dc1c9af67c6a0d695838e8. * Revert "Adding new WOFF files to the @uifabric/icons/fonts folder (#3848)" This reverts commit 66a91aadb99bca3923125d62cadc15984dba0be6. * Revert "Controlled TextFields (#3796)" This reverts commit b17a45fe057f50aa489be21d3e517d783b40b9e1. --- .../__snapshots__/ColorPicker.test.tsx.snap | 25 +++++++----------- .../src/components/DatePicker/DatePicker.tsx | 2 +- .../__snapshots__/DatePicker.test.tsx.snap | 2 +- .../components/TextField/TextField.test.tsx | 26 +++++++++---------- .../src/components/TextField/TextField.tsx | 12 +++------ .../components/TextField/TextField.types.ts | 2 +- .../__snapshots__/TextField.test.tsx.snap | 1 - .../TextField/examples/NumberTextField.tsx | 2 +- .../examples/TextField.Basic.Example.tsx | 15 ----------- .../TextField.ErrorMessage.Example.tsx | 8 +++--- 10 files changed, 35 insertions(+), 60 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap index 98b91e6a9727f4..0776b8f363c6dc 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap @@ -128,10 +128,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = ` className="ms-TextField-field" id="TextField0" onBlur={[Function]} - onChange={undefined} + onChange={[Function]} onFocus={[Function]} - onInput={undefined} - readOnly={true} + onInput={[Function]} spellCheck={false} type="text" value="ffffff" @@ -163,10 +162,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = ` className="ms-TextField-field" id="TextField2" onBlur={[Function]} - onChange={undefined} + onChange={[Function]} onFocus={[Function]} - onInput={undefined} - readOnly={true} + onInput={[Function]} spellCheck={false} type="text" value="255" @@ -198,10 +196,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = ` className="ms-TextField-field" id="TextField4" onBlur={[Function]} - onChange={undefined} + onChange={[Function]} onFocus={[Function]} - onInput={undefined} - readOnly={true} + onInput={[Function]} spellCheck={false} type="text" value="255" @@ -233,10 +230,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = ` className="ms-TextField-field" id="TextField6" onBlur={[Function]} - onChange={undefined} + onChange={[Function]} onFocus={[Function]} - onInput={undefined} - readOnly={true} + onInput={[Function]} spellCheck={false} type="text" value="255" @@ -268,10 +264,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = ` className="ms-TextField-field" id="TextField8" onBlur={[Function]} - onChange={undefined} + onChange={[Function]} onFocus={[Function]} - onInput={undefined} - readOnly={true} + onInput={[Function]} spellCheck={false} type="text" value="100" diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx index 093cfaa8f0d6a8..35fd4a6ed376e4 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx @@ -226,7 +226,7 @@ export class DatePicker extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index 66caed779204f9..213d16b79fbc47 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -30,7 +30,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = ` onInput={[Function]} onKeyDown={[Function]} placeholder={undefined} - readOnly={false} + readOnly={true} required={false} role="menu" type="text" diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx index 883c7f5866cfc4..cca8acb4468347 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx @@ -37,7 +37,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); @@ -84,7 +84,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); @@ -98,7 +98,7 @@ describe('TextField', () => { it('should render multiline as text area element', () => { const renderedDOM: HTMLElement = renderIntoDocument( - + ); // Assert on the input element. @@ -110,7 +110,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); @@ -154,7 +154,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); @@ -174,7 +174,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( ); @@ -190,7 +190,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( errorMessage } /> @@ -203,7 +203,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( Promise.resolve(errorMessage) } /> @@ -217,7 +217,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( '' } /> @@ -275,7 +275,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( @@ -298,7 +298,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( @@ -322,7 +322,7 @@ describe('TextField', () => { const renderedDOM: HTMLElement = renderIntoDocument( { renderIntoDocument( diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx index 3222f58884723b..bb711fbd70f7ee 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -55,7 +55,6 @@ export class TextField extends BaseComponent i private _latestValue: string | undefined; private _latestValidateValue: string | undefined; private _isDescriptionAvailable: boolean; - private _isControlled: boolean; private _textElement: HTMLTextAreaElement; public constructor(props: ITextFieldProps) { @@ -87,7 +86,6 @@ export class TextField extends BaseComponent i this._delayedValidate = this._async.debounce(this._validate, this.props.deferredValidationTime); this._lastValidation = 0; this._isDescriptionAvailable = false; - this._isControlled = typeof props.value !== 'string'; } /** @@ -354,9 +352,8 @@ export class TextField extends BaseComponent i { ...textAreaProps } ref={ this._resolveRef('_textElement') } value={ this.state.value } - onInput={ this._isControlled ? this._onInputChange : undefined } - onChange={ this._isControlled ? this._onInputChange : undefined } - readOnly={ !this._isControlled } + onInput={ this._onInputChange } + onChange={ this._onInputChange } className={ this._getTextElementClassName() } aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null } aria-invalid={ !!this.state.errorMessage } @@ -377,9 +374,8 @@ export class TextField extends BaseComponent i { ...inputProps } ref={ this._resolveRef('_textElement') } value={ this.state.value } - onInput={ this._isControlled ? this._onInputChange : undefined } - onChange={ this._isControlled ? this._onInputChange : undefined } - readOnly={ !this._isControlled } + onInput={ this._onInputChange } + onChange={ this._onInputChange } className={ this._getTextElementClassName() } aria-label={ this.props.ariaLabel } aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null } diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts index ca25da994a6df4..7f32537bc68d4c 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts @@ -132,7 +132,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx index 34ad4ead87cef2..899829d9ce115b 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx @@ -30,7 +30,7 @@ export class NumberTextField extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx index 658e203cd2bb1d..0413006a10d4f2 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx @@ -9,21 +9,6 @@ export class TextFieldBasicExample extends React.Component { - - - { /> From 83be28cba3b75cf3db87c21da190f2247f4bc33e Mon Sep 17 00:00:00 2001 From: amyngu <31973030+amyngu@users.noreply.github.com> Date: Thu, 1 Feb 2018 14:52:07 -0800 Subject: [PATCH 005/284] ExtendedPicker: Allow edit selected items (#3794) * allow for item editing * run npm run change * make privates underscored * Fix from bad merge --- ...lectedItemsListItems_2018-01-24-21-52.json | 11 ++ .../ExtendedPeoplePicker.Basic.Example.tsx | 22 +++- .../FloatingPicker/BaseFloatingPicker.tsx | 8 ++ .../SelectedPeopleList/Items/EditingItem.scss | 8 ++ .../SelectedPeopleList/Items/EditingItem.tsx | 120 ++++++++++++++++++ .../SelectedPeopleList/SelectedPeopleList.tsx | 85 ++++++++++--- .../SelectedPeopleList.Basic.Example.tsx | 2 +- 7 files changed, 229 insertions(+), 27 deletions(-) create mode 100644 common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json create mode 100644 packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss create mode 100644 packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx diff --git a/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json b/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json new file mode 100644 index 00000000000000..7766810335ce18 --- /dev/null +++ b/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "allow editing of selected items in selected people list", + "type": "minor" + } + ], + "packageName": "@uifabric/experiments", + "email": "amyngu@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index 719bac468612b5..b8d38b35d3c203 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx @@ -36,8 +36,8 @@ const suggestionProps: IBasePickerSuggestionsProps = { // tslint:disable-next-line:no-any export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeoplePickerExampleState> { private _picker: ExtendedPeoplePicker; - private floatingPickerProps: IBaseFloatingPickerProps; - private selectedItemsListProps: ISelectedPeopleProps; + private _floatingPickerProps: IBaseFloatingPickerProps; + private _selectedItemsListProps: ISelectedPeopleProps; constructor(props: {}) { super(props); @@ -54,7 +54,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP mostRecentlyUsed: mru, }; - this.floatingPickerProps = { + this._floatingPickerProps = { suggestionsController: new SuggestionsController(), onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, @@ -65,11 +65,15 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP onZeroQuerySuggestion: this._returnMostRecentlyUsed, }; - this.selectedItemsListProps = { + this._selectedItemsListProps = { onCopyItems: this._onCopyItems, onExpandGroup: this._onExpandItem, removeMenuItemText: 'Remove', copyMenuItemText: 'Copy name', + editMenuItemText: 'Edit', + getEditingItemText: this._getEditingItemText, + onRenderFloatingPicker: this._onRenderFloatingPicker, + floatingPickerProps: this._floatingPickerProps, }; } @@ -88,8 +92,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP private _renderExtendedPicker(): JSX.Element { return ( ); } + private _getEditingItemText(item: IExtendedPersonaProps): string { + return item.primaryText as string; + } + @autobind private _setComponentRef(component: ExtendedPeoplePicker): void { this._picker = component; @@ -132,7 +140,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP @autobind private _onExpandItem(item: IExtendedPersonaProps): void { // tslint:disable-next-line:no-any - (this._picker.selectedItemsList as SelectedPeopleList).onExpandItem(item, this._getExpandedGroupItems(item as any)); + (this._picker.selectedItemsList as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any)); } @autobind diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx index d657288ad95a31..f82f47b2cfcbde 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -54,6 +54,14 @@ export class BaseFloatingPicker> extend }; } + public forceResolveSuggestion(): void { + if (this.suggestionStore.hasSelectedSuggestion()) { + this.completeSuggestion(); + } else { + this._onValidateInput(); + } + } + public get isSuggestionsShown(): boolean { return this.state.suggestionsVisible ? false : this.state.suggestionsVisible as boolean; } diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss new file mode 100644 index 00000000000000..b2332b1861a071 --- /dev/null +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss @@ -0,0 +1,8 @@ +.editingInput { + border: 0px; + outline: none; + + &::-ms-clear { + display: none; + } +} \ No newline at end of file diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx new file mode 100644 index 00000000000000..6ef143f7e5af06 --- /dev/null +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -0,0 +1,120 @@ +/* tslint:disable */ +import * as React from 'react'; +/* tslint:enable */ +import { BaseComponent, KeyCodes, autobind, getId, getNativeProps, inputProperties } from '../../../../Utilities'; +import { FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../../../FloatingPicker'; +import { ISelectedPeopleItemProps } from '../SelectedPeopleList'; +import { IExtendedPersonaProps } from '../SelectedPeopleList'; +import { IPeoplePickerItemState } from './ExtendedSelectedItem'; + +import * as stylesImport from './EditingItem.scss'; + +// tslint:disable-next-line:no-any +const styles: any = stylesImport; + +export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps { + // tslint:disable-next-line:no-any + onEditingComplete: (oldItem: any, newItem: any) => void; + onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; + floatingPickerProps?: IBaseFloatingPickerProps; + getEditingItemText?: (item: IExtendedPersonaProps) => string; +} + +export class EditingItem extends BaseComponent { + private _editingInput: HTMLInputElement; + private _editingFloatingPicker: FloatingPeoplePicker; + private _onRenderFloatingPicker: (props: IBaseFloatingPickerProps) => JSX.Element; + private _floatingPickerProps: IBaseFloatingPickerProps; + + constructor(props: IEditingSelectedPeopleItemProps) { + super(props); + this.state = { contextualMenuVisible: false }; + this._onRenderFloatingPicker = this.props.onRenderFloatingPicker as + (props: IBaseFloatingPickerProps) => JSX.Element; + this._floatingPickerProps = this.props.floatingPickerProps as IBaseFloatingPickerProps; + } + + public componentDidMount(): void { + let getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string; + let itemText = getEditingItemText(this.props.item); + this._editingFloatingPicker.onQueryStringChanged(itemText); + this._editingInput.value = itemText; + this._editingInput.focus(); + } + + @autobind + public render(): JSX.Element { + const itemId = getId(); + const nativeProps = getNativeProps(this.props, inputProperties); + return ( +
+ + { this._renderEditingSuggestions() } +
); + } + + @autobind + private _renderEditingSuggestions(): JSX.Element { + let onRenderFloatingPicker = this._onRenderFloatingPicker; + return (onRenderFloatingPicker({ + componentRef: this._resolveRef('editingFloatingPicker'), + onChange: this._onSuggestionSelected, + inputElement: this._editingInput, + selectedItems: [], + ...this._floatingPickerProps + })); + } + + @autobind + private _resolveInputRef(ref: HTMLInputElement): void { + this._editingInput = ref; + + this.forceUpdate(() => { this._editingInput.focus(); }); + } + + @autobind + private _onInputClick(): void { + this._editingFloatingPicker.showPicker(); + } + + @autobind + private _onInputBlur(): void { + this._editingFloatingPicker.forceResolveSuggestion(); + } + + @autobind + private _onInputChange(ev: React.FormEvent): void { + let value: string = (ev.target as HTMLInputElement).value; + + if (value === '') { + if (this.props.onRemoveItem) { + this.props.onRemoveItem(); + } + } else { + this._editingFloatingPicker.onQueryStringChanged(value); + } + } + + private _onInputKeyDown(ev: React.KeyboardEvent): void { + if (ev.which === KeyCodes.backspace || ev.which === KeyCodes.del) { + ev.stopPropagation(); + } + } + + @autobind + private _onSuggestionSelected(item: IExtendedPersonaProps): void { + this.props.onEditingComplete(this.props.item, item); + } +} \ No newline at end of file diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx index 63bd372d812e45..ade17531c2ea36 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx @@ -8,9 +8,12 @@ import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem'; import { autobind } from '../../../Utilities'; import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; +import { IBaseFloatingPickerProps } from '../../../FloatingPicker'; +import { EditingItem } from './Items/EditingItem'; export interface IExtendedPersonaProps extends IPersonaProps { canExpand?: boolean; + isEditing?: boolean; } export interface ISelectedPeopleItemProps extends ISelectedItemProps { @@ -22,6 +25,10 @@ export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps void; removeMenuItemText?: string; copyMenuItemText?: string; + editMenuItemText?: string; + getEditingItemText?: (item: IExtendedPersonaProps) => string; + onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; + floatingPickerProps?: IBaseFloatingPickerProps; } export class BasePeopleSelectedItemsList extends BaseSelectedItemsList { @@ -37,25 +44,27 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { onRenderItem: (props: ISelectedPeopleItemProps) => , }; - public onExpandItem(itemToExpand: IExtendedPersonaProps, expandedItems: IExtendedPersonaProps[]): void { + @autobind + public replaceItem(itemToReplace: IExtendedPersonaProps, itemsToReplaceWith: IExtendedPersonaProps[]): void { let { items } = this.state; - let index: number = items.indexOf(itemToExpand); - // tslint:disable-next-line:no-any - let filteredExpandedItems = expandedItems.filter((item: any) => items.indexOf(item) === -1); + let index: number = items.indexOf(itemToReplace); if (index > -1) { - let newItems = items.slice(0, index).concat(filteredExpandedItems).concat(items.slice(index + 1)); + let newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1)); this.updateItems(newItems); } } @autobind protected renderItems(): JSX.Element[] { - let { removeButtonAriaLabel } = this.props; - let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element; - let { items } = this.state; // tslint:disable-next-line:no-any - return items.map((item: any, index: number) => onRenderItem({ + return items.map((item: any, index: number) => this._renderItem(item, index)); + } + + // tslint:disable-next-line:no-any + private _renderItem(item: any, index: number): JSX.Element { + let { removeButtonAriaLabel } = this.props; + let props = { item, index, key: item.key ? item.key : index, @@ -66,22 +75,48 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { onCopyItem: (itemToCopy: IExtendedPersonaProps) => this.copyItems([itemToCopy]), onExpandItem: this.props.onExpandGroup ? () => (this.props.onExpandGroup as (item: IExtendedPersonaProps) => void)(item) : undefined, menuItems: this._createMenuItems(item), - })); + }; + + if ((item as IExtendedPersonaProps).isEditing) { + return ( + + ); + } else { + let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element; + return onRenderItem({ ...props }); + } + } + + @autobind + // tslint:disable-next-line:no-any + private _completeEditing(oldItem: any, newItem: any): void { + oldItem.isEditing = false; + this.replaceItem(oldItem, newItem); } // tslint:disable-next-line:no-any private _createMenuItems(item: any): IContextualMenuItem[] { - return [ - { - key: 'Copy', - name: this.props.copyMenuItemText ? this.props.copyMenuItemText : 'Copy', + let menuItems: IContextualMenuItem[] = []; + + if (this.props.editMenuItemText && this.props.getEditingItemText) { + menuItems.push({ + key: 'Edit', + name: this.props.editMenuItemText ? this.props.editMenuItemText : 'Edit', onClick: (ev: React.MouseEvent, menuItem: IContextualMenuItem) => { - if (this.props.onCopyItems) { - (this.copyItems as (items: IExtendedPersonaProps[]) => void)([menuItem.data] as IExtendedPersonaProps[]); - } + (menuItem.data as IExtendedPersonaProps).isEditing = true; + this.forceUpdate(); }, data: item, - }, + }); + } + + menuItems.push( { key: 'Remove', name: this.props.removeMenuItemText ? this.props.removeMenuItemText : 'Remove', @@ -90,6 +125,18 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { }, data: item, }, - ]; + { + key: 'Copy', + name: this.props.copyMenuItemText ? this.props.copyMenuItemText : 'Copy', + onClick: (ev: React.MouseEvent, menuItem: IContextualMenuItem) => { + if (this.props.onCopyItems) { + (this.copyItems as (items: IExtendedPersonaProps[]) => void)([menuItem.data] as IExtendedPersonaProps[]); + } + }, + data: item, + }, + ); + + return menuItems; } } \ No newline at end of file diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx index 1402db0f8d37b0..e75b9d012cab06 100644 --- a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx +++ b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx @@ -64,7 +64,7 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { @autobind private _onExpandItem(item: IExtendedPersonaProps): void { // tslint:disable-next-line:no-any - this._selectionList.onExpandItem(item, this._getExpandedGroupItems(item as any)); + this._selectionList.replaceItem(item, this._getExpandedGroupItems(item as any)); } private _onSelectionChange(): void { From 1b709bc84a01334f990fd6474d9fba0a07dbe61d Mon Sep 17 00:00:00 2001 From: lejimsft <32402358+lejimsft@users.noreply.github.com> Date: Thu, 1 Feb 2018 15:41:48 -0800 Subject: [PATCH 006/284] Leji/use blockedsite icon (#3827) * Consume updated icon name for malware detected signal * revert last change * use updated icon for malware detected signal * adding change file --- .../leji-use-blockedsite-icon_2018-01-28-23-58.json | 11 +++++++++++ .../experiments/src/components/signals/Signals.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json diff --git a/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json b/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json new file mode 100644 index 00000000000000..7376670ee53f66 --- /dev/null +++ b/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "consume BlockedSite icon for malware detected signal", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "leji@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/signals/Signals.tsx b/packages/experiments/src/components/signals/Signals.tsx index 34e6037bfe556f..5b7622957e6a16 100644 --- a/packages/experiments/src/components/signals/Signals.tsx +++ b/packages/experiments/src/components/signals/Signals.tsx @@ -201,7 +201,7 @@ export const MalwareDetectedSignal: Signal = (props: ISignalProps): JSX.Element ); }; From 66cd98c137b60c9272c2a1ef7d55a68ad45e7b39 Mon Sep 17 00:00:00 2001 From: Josh Goldberg Date: Thu, 1 Feb 2018 18:38:35 -0800 Subject: [PATCH 007/284] "unnecessarily" typo in List.tsx (#3869) --- packages/office-ui-fabric-react/src/components/List/List.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx index d695db1c71eeae..3d62a1d1595fe5 100644 --- a/packages/office-ui-fabric-react/src/components/List/List.tsx +++ b/packages/office-ui-fabric-react/src/components/List/List.tsx @@ -398,7 +398,7 @@ export class List extends BaseComponent implements IList role: 'presentation' }, this._onRenderPage); - // cache the first page for now since it is re-rendered a lot times unncessarily. + // cache the first page for now since it is re-rendered a lot times unnecessarily. // todo: a more aggresive caching mechanism is to cache pages constaining the items not changed. // now we re-render pages too frequently, for example, props.items increased from 30 to 60, although the // first 30 items did not change, we still re-rendered all of them in this props.items change. From a5b4da9b1c632a1d33a89d44905c83a1e3cfcd2f Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Fri, 2 Feb 2018 03:24:17 -0800 Subject: [PATCH 008/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...lectedItemsListItems_2018-01-24-21-52.json | 11 -------- ...use-blockedsite-icon_2018-01-28-23-58.json | 11 -------- ...tyItemEx-mergestyles_2018-01-31-00-28.json | 11 -------- packages/experiments/CHANGELOG.json | 26 +++++++++++++++++++ packages/experiments/CHANGELOG.md | 13 +++++++++- packages/experiments/package.json | 4 +-- .../office-ui-fabric-react/CHANGELOG.json | 14 ++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 9 ++++++- packages/office-ui-fabric-react/package.json | 2 +- 14 files changed, 68 insertions(+), 43 deletions(-) delete mode 100644 common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json delete mode 100644 common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json delete mode 100644 common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index cb67d96d7983bc..cd52474b82653f 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.45.2 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index d93a62255b90c5..47e223913e7fba 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.45.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 423e47748dc17a..e3505904309cdb 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.45.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 86563e4c8da565..66c2f41b20f56d 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.45.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 87619aa70d8f76..f34feafac2978a 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.45.1 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json b/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json deleted file mode 100644 index 7766810335ce18..00000000000000 --- a/common/changes/@uifabric/experiments/editSelectedItemsListItems_2018-01-24-21-52.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "allow editing of selected items in selected people list", - "type": "minor" - } - ], - "packageName": "@uifabric/experiments", - "email": "amyngu@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json b/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json deleted file mode 100644 index 7376670ee53f66..00000000000000 --- a/common/changes/@uifabric/experiments/leji-use-blockedsite-icon_2018-01-28-23-58.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "consume BlockedSite icon for malware detected signal", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "leji@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json b/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json deleted file mode 100644 index 8f965fe1344812..00000000000000 --- a/common/changes/office-ui-fabric-react/ActivityItemEx-mergestyles_2018-01-31-00-28.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-brgarl@microsoft.com" -} \ No newline at end of file diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 68522e4ca708d0..3c41749f11535e 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,32 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.17.0", + "tag": "@uifabric/experiments_v5.17.0", + "date": "Fri, 02 Feb 2018 11:24:16 GMT", + "comments": { + "minor": [ + { + "author": "amyngu <31973030+amyngu@users.noreply.github.com>", + "commit": "83be28cba3b75cf3db87c21da190f2247f4bc33e", + "comment": "allow editing of selected items in selected people list" + } + ], + "patch": [ + { + "author": "lejimsft <32402358+lejimsft@users.noreply.github.com>", + "commit": "1b709bc84a01334f990fd6474d9fba0a07dbe61d", + "comment": "consume BlockedSite icon for malware detected signal" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.45.2 <6.0.0` to `>=5.45.3 <6.0.0`" + } + ] + } + }, { "version": "5.16.1", "tag": "@uifabric/experiments_v5.16.1", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index dbda5316b63fd0..f1e74cc62e6ca8 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,17 @@ # Change Log - @uifabric/experiments -This log was last generated on Wed, 31 Jan 2018 11:11:59 GMT and should not be manually modified. +This log was last generated on Fri, 02 Feb 2018 11:24:16 GMT and should not be manually modified. + +## 5.17.0 +Fri, 02 Feb 2018 11:24:16 GMT + +### Minor changes + +- allow editing of selected items in selected people list + +### Patches + +- consume BlockedSite icon for malware detected signal ## 5.16.1 Wed, 31 Jan 2018 11:11:59 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 0421f7addd6ceb..63631ba3fecc31 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.16.1", + "version": "5.17.0", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -44,7 +44,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.45.2 <6.0.0", + "office-ui-fabric-react": ">=5.45.3 <6.0.0", "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 0946b11c331a05..9c917dbe33563a 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.45.3", + "tag": "office-ui-fabric-react_v5.45.3", + "date": "Fri, 02 Feb 2018 11:24:16 GMT", + "comments": { + "patch": [ + { + "author": "Brian Garland ", + "commit": "78c61efde3fb8ba11d5124adca4934f823094747", + "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS" + } + ] + } + }, { "version": "5.45.2", "tag": "office-ui-fabric-react_v5.45.2", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index b8661c8aa3cfc3..d71482ee346376 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - office-ui-fabric-react -This log was last generated on Thu, 01 Feb 2018 11:23:17 GMT and should not be manually modified. +This log was last generated on Fri, 02 Feb 2018 11:24:16 GMT and should not be manually modified. + +## 5.45.3 +Fri, 02 Feb 2018 11:24:16 GMT + +### Patches + +- Converted ActivityItemExample to use mergeStyles instead of SCSS ## 5.45.2 Thu, 01 Feb 2018 11:23:17 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 973fbd9aa4ed6b..2196d98549c8ae 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.45.2", + "version": "5.45.3", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", From 5c71bd92894505214a9a6df8c4fb9d8e43472d98 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 2 Feb 2018 10:34:16 -0800 Subject: [PATCH 009/284] Dropdown, ComboBox, TextField: Improved high contrast in focus state (#3870) * Dropdown highcontrast on focus * TextField thicker border on hover in hc * Text shifting fix * ComboBox hc and layout for border-box sizing * Updated snapshot * Added change file * Semicolon --- .../dropdown-hc_2018-02-02-02-15.json | 11 ++++ .../components/ComboBox/ComboBox.styles.ts | 43 ++++++++++++---- .../__snapshots__/ComboBox.test.tsx.snap | 50 ++++++++++++++++--- .../src/components/Dropdown/Dropdown.scss | 25 ++++++---- .../src/components/TextField/TextField.scss | 17 +++++-- 5 files changed, 118 insertions(+), 28 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json diff --git a/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json b/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json new file mode 100644 index 00000000000000..96a1f0b4935962 --- /dev/null +++ b/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts index 23814ba2fb8f80..98de0475a975b0 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts @@ -149,6 +149,9 @@ export const getCaretDownButtonStyles = memoizeFunction(( color: caretButtonTextColor, fontSize: FontSizes.small, position: 'absolute', + // The negative positioning accounts for the 1px root border now that box-sizing is border-box + top: '-1px', + right: '-1px', height: ComboBoxHeight, lineHeight: ComboBoxLineHeight, width: ComboxBoxCaretDownWidth, @@ -204,6 +207,25 @@ export const getStyles = memoizeFunction(( const ComboBoxCalloutBorderColor = palette.neutralLight; const ComboBoxOptionHeaderTextColor = semanticColors.menuHeader; const ComboBoxOptionDividerBorderColor = semanticColors.bodyDivider; + const ComboBoxRootHighContrastFocused = { + color: 'HighlightText', + borderColor: 'Highlight', + backgroundColor: 'Window', + borderWidth: '2px', + MsHighContrastAdjust: 'none', + paddingLeft: '11px', + selectors: { + '.ms-ComboBox-Input': { + // ComboBoxHeight is 32, 28 accounts for the 2px borders + height: '28px' + }, + '.ms-ComboBox-CaretDown-button': { + // Negative positioning to account for the 2px border + right: '-2px', + top: '-2px' + } + } + }; const styles: IComboBoxStyles = { container: {}, @@ -230,11 +252,10 @@ export const getStyles = memoizeFunction(( cursor: 'text', display: 'block', height: ComboBoxHeight, - lineHeight: ComboBoxLineHeight, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', - boxSizing: 'content-box', + boxSizing: 'border-box', // Border-box matches Dropdown and TextField selectors: { '.ms-Label': { display: 'inline-block', @@ -248,7 +269,10 @@ export const getStyles = memoizeFunction(( } }, '&.is-open': { - borderColor: ComboBoxRootBorderColorFocused + borderColor: ComboBoxRootBorderColorFocused, + selectors: { + [HighContrastSelector]: ComboBoxRootHighContrastFocused + }, } } } @@ -260,23 +284,23 @@ export const getStyles = memoizeFunction(( [HighContrastSelector]: { color: 'HighlightText', borderColor: 'Highlight', + backgroundColor: 'Window', MsHighContrastAdjust: 'none' } }, }, rootPressed: { - borderColor: ComboBoxRootBorderColorFocused + borderColor: ComboBoxRootBorderColorFocused, + selectors: { + [HighContrastSelector]: ComboBoxRootHighContrastFocused + } }, rootFocused: { borderColor: ComboBoxRootBorderColorFocused, selectors: { - [HighContrastSelector]: { - color: 'HighlightText', - borderColor: 'Highlight', - MsHighContrastAdjust: 'none' - } + [HighContrastSelector]: ComboBoxRootHighContrastFocused }, }, @@ -298,7 +322,6 @@ export const getStyles = memoizeFunction(( font: 'inherit', textOverflow: 'ellipsis', padding: '0', - margin: '1px 0px' }, inputDisabled: getDisabledStyles(theme), diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index 72cfa71b8c91ac..410413b8d27910 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -16,7 +16,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` border-style: solid; border-width: 1px; box-shadow: none; - box-sizing: content-box; + box-sizing: border-box; color: #333333; cursor: text; display: block; @@ -24,7 +24,6 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` font-size: 14px; font-weight: 400; height: 32px; - line-height: 30px; margin-bottom: 10px; margin-left: 0; outline: 0; @@ -48,24 +47,65 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` &.is-open { border-color: #0078d7; } + @media screen and (-ms-high-contrast: active){&.is-open { + -ms-high-contrast-adjust: none; + background-color: Window; + border-color: Highlight; + border-width: 2px; + color: HighlightText; + padding-left: 11px; + } + @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-Input { + height: 28px; + } + @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-CaretDown-button { + right: -2px; + top: -2px; + } &:hover { border-color: #212121; } @media screen and (-ms-high-contrast: active){&:hover { -ms-high-contrast-adjust: none; + background-color: Window; border-color: Highlight; color: HighlightText; } &:active { border-color: #0078d7; } + @media screen and (-ms-high-contrast: active){&:active { + -ms-high-contrast-adjust: none; + background-color: Window; + border-color: Highlight; + border-width: 2px; + color: HighlightText; + padding-left: 11px; + } + @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-Input { + height: 28px; + } + @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-CaretDown-button { + right: -2px; + top: -2px; + } &:focus { border-color: #0078d7; } @media screen and (-ms-high-contrast: active){&:focus { -ms-high-contrast-adjust: none; + background-color: Window; border-color: Highlight; + border-width: 2px; color: HighlightText; + padding-left: 11px; + } + @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-Input { + height: 28px; + } + @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-CaretDown-button { + right: -2px; + top: -2px; } id="ComboBox0wrapper" > @@ -88,10 +128,6 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` box-sizing: border-box; font: inherit; height: 30px; - margin-bottom: 1px; - margin-left: 0px; - margin-right: 0px; - margin-top: 1px; outline: none; padding-bottom: 0; padding-left: 0; @@ -150,8 +186,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` padding-right: 4px; padding-top: 0; position: absolute; + right: -1px; text-align: center; text-decoration: none; + top: -1px; user-select: none; vertical-align: top; width: 32px; diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index e24c22d1328213..658672de7ce28c 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -12,8 +12,8 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; $DropDown-height: 32px; $DropDown-item-height: 32px; -// Mixin for high contrast mode link states -@mixin highContrastListItemState { +// Mixin for high contrast mode states +@mixin highContrastItemAndTitleState { @include high-contrast { background-color: Highlight; border-color: Highlight; @@ -23,6 +23,12 @@ $DropDown-item-height: 32px; @include highContrastAdjust(); } +@mixin highContrastBorderState { + @include high-contrast { + border-color: Highlight; + } +} + .root { @include ms-normalize; @include ms-font-m; @@ -38,11 +44,6 @@ $DropDown-item-height: 32px; .title, .caretDown { color: $ms-color-neutralDark; - - @include high-contrast { - // Using Highlight for text here specifically to match the border color that indicates focus on dropdown root elements. - color: Highlight; - } } .titleIsPlaceHolder { @@ -53,6 +54,7 @@ $DropDown-item-height: 32px; &:hover { .title { border-color: $ms-color-neutralDark; + @include highContrastBorderState(); } .titleIsError { border-color: $ms-color-error; @@ -62,6 +64,7 @@ $DropDown-item-height: 32px; &:active { .title { border-color: $ms-color-themeDark; + @include highContrastBorderState(); } .titleIsError { border-color: $ms-color-error; @@ -71,6 +74,10 @@ $DropDown-item-height: 32px; &:focus { .title { border-color: $ms-color-themePrimary; + @include highContrastItemAndTitleState(); + } + .caretDown { + @include highContrastAdjust(); } .titleIsError { border-color: $ms-color-error; @@ -207,7 +214,7 @@ $DropDown-item-height: 32px; &:focus { background-color: $ms-color-neutralLighter; - @include highContrastListItemState; + @include highContrastItemAndTitleState; } &:active { @@ -229,7 +236,7 @@ $DropDown-item-height: 32px; background-color: $Dropdown-selectedItem-bg; color: $ms-color-black; - @include highContrastListItemState; + @include highContrastItemAndTitleState; &.itemIsDisabled { color: $ms-color-neutralTertiary; diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss index 43b076b98c3600..6deccdf4964fd0 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss @@ -28,6 +28,17 @@ $field-placeholder-disabled-color: $disabledTextColor; $field-description-color: $bodySubtextColor; $field-error-color: $errorTextColor; +// Mixin for focus border, including high contrast +@mixin fieldFocusBorder { + border-color: $field-border-focus-color; + @include high-contrast { + border-width: 2px; + .field { + @include ms-padding(0, 11px, 0, 11px); + } + } +} + // the box containing the label and input field .root { @include ms-normalize; @@ -54,7 +65,7 @@ $field-error-color: $errorTextColor; } &.fieldGroupIsFocused { - border-color: $field-border-focus-color; + @include fieldFocusBorder(); } &.fieldGroupIsFocused { @@ -163,7 +174,7 @@ $field-error-color: $errorTextColor; //= State: An active textfield .root.rootIsActive { - border-color: $field-border-focus-color; + @include fieldFocusBorder(); } .icon { @@ -241,7 +252,7 @@ $field-error-color: $errorTextColor; } &.rootIsActive { - border-color: $field-border-focus-color; + @include fieldFocusBorder(); } &:hover:not(.rootIsDisabled), From fe1c0f061947e66f1a3c63b168cdfecdc282b39b Mon Sep 17 00:00:00 2001 From: Lambert Wang Date: Fri, 2 Feb 2018 13:35:06 -0800 Subject: [PATCH 010/284] [SpinButton] Fix floating point rounding issues and implemented precision (#3867) * SpinButton, implemented precision * Change file * Precision functions to utils * Change file * Removed default reference --- ...spinbutton_precision_2018-02-02-18-16.json | 11 +++++ ...spinbutton_precision_2018-02-02-00-02.json | 11 +++++ .../src/components/SpinButton/SpinButton.tsx | 30 ++++++++---- .../components/SpinButton/SpinButton.types.ts | 10 ++++ .../examples/SpinButton.Basic.Example.tsx | 9 ++++ packages/utilities/src/math.test.ts | 48 ++++++++++++++++++- packages/utilities/src/math.ts | 37 ++++++++++++++ 7 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json create mode 100644 common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json diff --git a/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json b/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json new file mode 100644 index 00000000000000..9d0d74345f74b6 --- /dev/null +++ b/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/utilities", + "comment": "[Math] implemented precision rounding functions", + "type": "minor" + } + ], + "packageName": "@uifabric/utilities", + "email": "law@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json b/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json new file mode 100644 index 00000000000000..59b38e88323a2b --- /dev/null +++ b/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "[SpinButton] Implemented precision", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "law@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx index 5292a2e5b4b285..f219de768ef828 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx @@ -7,7 +7,9 @@ import { getId, KeyCodes, autobind, - customizable + customizable, + calculatePrecision, + precisionRound } from '../../Utilities'; import { ISpinButton, @@ -40,6 +42,11 @@ export interface ISpinButtonState { * as active when up/down arrow is pressed */ keyboardSpinDirection: KeyboardSpinDirection; + + /** + * The calculated precision for the value. + */ + precision: number; } @customizable('SpinButton', ['theme']) @@ -80,10 +87,14 @@ export class SpinButton extends BaseComponent { - let newValue = Math.min(Number(value) + (this.props.step as number), this.props.max as number); + private _defaultOnIncrement = (value: string): string | void => { + let newValue: number = Math.min(Number(value) + Number(this.props.step)!, this.props.max!); + newValue = precisionRound(newValue, this.state.precision); return String(newValue); } /** * Increment function to use if one is not passed in */ - private _defaultOnDecrement = (value: string) => { - let newValue = Math.max(Number(value) - (this.props.step as number), this.props.min as number); + private _defaultOnDecrement = (value: string): string | void => { + let newValue: number = Math.max(Number(value) - Number(this.props.step)!, this.props.min!); + newValue = precisionRound(newValue, this.state.precision); return String(newValue); } @@ -351,7 +365,7 @@ export class SpinButton extends BaseComponent string | void) { - const newValue = stepFunction(this.state.value as string); + let newValue: string | void = stepFunction(this.state.value); if (newValue) { this._lastValidValue = newValue; this.setState({ value: newValue }); diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts index 513085a9892900..e21a7cc9cadd1d 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts @@ -51,6 +51,9 @@ export interface ISpinButtonProps { /** * The difference between the two adjacent values of the SpinButton. + * This value is sued to calculate the precision of the input if no + * precision is given. The precision calculated this way will always + * be >= 0. * @default 1 */ step?: number; @@ -165,6 +168,13 @@ export interface ISpinButtonProps { * Accessibility label text for the decrement button for the benefit of the screen reader. */ decrementButtonAriaLabel?: string; + + /** + * To how many decimal places the value should be rounded to. + * The default value is calculated based on the precision of step. + * IE: if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. + */ + precision?: number; } export interface ISpinButtonStyles { diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx index 170847ae760460..0b5eaf10976f71 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx @@ -15,6 +15,15 @@ export class SpinButtonBasicExample extends React.Component { onFocus={ () => console.log('onFocus called') } onBlur={ () => console.log('onBlur called') } /> + console.log('onFocus called') } + onBlur={ () => console.log('onBlur called') } + /> ); } diff --git a/packages/utilities/src/math.test.ts b/packages/utilities/src/math.test.ts index a3a8f0b7056829..63256b6f6b028f 100644 --- a/packages/utilities/src/math.test.ts +++ b/packages/utilities/src/math.test.ts @@ -1,4 +1,8 @@ -import { fitContentToBounds } from './math'; +import { + fitContentToBounds, + calculatePrecision, + precisionRound +} from './math'; describe('math', () => { describe('#fitContentToBounds', () => { @@ -144,4 +148,46 @@ describe('math', () => { }); }); }); + + describe('#calculatePrecision', () => { + it('caluclatePrecision should work as intended', () => { + expect(calculatePrecision(0)).toEqual(0); + expect(calculatePrecision(1)).toEqual(0); + expect(calculatePrecision('1')).toEqual(0); + + expect(calculatePrecision(200)).toEqual(-2); + expect(calculatePrecision(32100012300000)).toEqual(-5); + + expect(calculatePrecision(231.00)).toEqual(0); + expect(calculatePrecision('231.00')).toEqual(2); + expect(calculatePrecision(321.00002)).toEqual(5); + expect(calculatePrecision('321.00002')).toEqual(5); + + expect(calculatePrecision(.002)).toEqual(3); + expect(calculatePrecision('.002')).toEqual(3); + }); + }); + + describe('#precisionRound', () => { + it('precisionRound should work as intended', () => { + expect(precisionRound(1234, 0)).toEqual(1234); + expect(precisionRound(1234, -1)).toEqual(1230); + expect(precisionRound(1234, -3)).toEqual(1000); + + expect(precisionRound(1234.5678, 0)).toEqual(1235); + expect(precisionRound(1234.5678, 1)).toEqual(1234.6); + expect(precisionRound(1234.5678, 5)).toEqual(1234.5678); + + expect(precisionRound(1234.555, 2)).toEqual(1234.56); + expect(precisionRound(1234.554, 2)).toEqual(1234.55); + expect(precisionRound(1250, -2)).toEqual(1300); + expect(precisionRound(1249, -2)).toEqual(1200); + + // Different bases + expect(precisionRound(1234.5, -2, 2)).toEqual(1236); + expect(precisionRound(1234.5, -2, 16)).toEqual(1280); + expect(precisionRound(1234.5, -2, 8)).toEqual(1216); + expect(precisionRound(1234.5, -2, 7)).toEqual(1225); + }); + }); }); diff --git a/packages/utilities/src/math.ts b/packages/utilities/src/math.ts index 2eae208b5490e4..c1288a48280751 100644 --- a/packages/utilities/src/math.ts +++ b/packages/utilities/src/math.ts @@ -93,3 +93,40 @@ export function fitContentToBounds(options: IFitContentToBoundsOptions): ISize { height: contentSize.height * finalScale }; } + +/** + * Calculates a number's precision based on the number of trailing + * zeros if the number does not have a decimal indicated by a negative + * precision. Otherwise, it calculates the number of digits after + * the decimal point indicated by a positive precision. + * @param value + */ +export function calculatePrecision(value: number | string): number { + /** + * Group 1: + * [1-9]([0]+$) matches trailing zeros + * Group 2: + * \.([0-9]*) matches all digits after a decimal point. + */ + const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value)); + if (!groups) { + return 0; + } + if (groups[1]) { + return -groups[1].length; + } + if (groups[2]) { + return groups[2].length; + } + return 0; +} + +/** + * Rounds a number to a certain level of precision. Accepts negative precision. + * @param value The value that is being rounded. + * @param precision The number of decimal places to round the number to + */ +export function precisionRound(value: number, precision: number, base: number = 10): number { + const exp = Math.pow(base, precision); + return Math.round(value * exp) / exp; +} From 27319afb02ca64f3c70829d56f5809fa7d5937fd Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Mon, 5 Feb 2018 11:24:23 +0000 Subject: [PATCH 011/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- ...spinbutton_precision_2018-02-02-18-16.json | 11 -------- .../dropdown-hc_2018-02-02-02-15.json | 11 -------- ...spinbutton_precision_2018-02-02-00-02.json | 11 -------- packages/example-app-base/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 26 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 13 +++++++++- packages/office-ui-fabric-react/package.json | 4 +-- packages/styling/package.json | 2 +- packages/utilities/CHANGELOG.json | 14 ++++++++++ packages/utilities/CHANGELOG.md | 9 ++++++- packages/utilities/package.json | 2 +- 12 files changed, 66 insertions(+), 41 deletions(-) delete mode 100644 common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json delete mode 100644 common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json delete mode 100644 common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index cd52474b82653f..8951153cf1c2d1 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.46.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json b/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json deleted file mode 100644 index 9d0d74345f74b6..00000000000000 --- a/common/changes/@uifabric/utilities/magellan-spinbutton_precision_2018-02-02-18-16.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "[Math] implemented precision rounding functions", - "type": "minor" - } - ], - "packageName": "@uifabric/utilities", - "email": "law@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json b/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json deleted file mode 100644 index 96a1f0b4935962..00000000000000 --- a/common/changes/office-ui-fabric-react/dropdown-hc_2018-02-02-02-15.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json b/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json deleted file mode 100644 index 59b38e88323a2b..00000000000000 --- a/common/changes/office-ui-fabric-react/magellan-spinbutton_precision_2018-02-02-00-02.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "[SpinButton] Implemented precision", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "law@microsoft.com" -} \ No newline at end of file diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index 2bf696bc634db6..da3e006af36f76 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.9.0 <6.0.0", + "@uifabric/utilities": ">=5.10.0 <6.0.0", "highlight.js": "^9.12.0", "office-ui-fabric-react": ">=5.1.0 <6.0.0", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 9c917dbe33563a..6d8caa415d360c 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,32 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.46.0", + "tag": "office-ui-fabric-react_v5.46.0", + "date": "Mon, 05 Feb 2018 11:24:23 GMT", + "comments": { + "patch": [ + { + "author": "lynamemi ", + "commit": "5c71bd92894505214a9a6df8c4fb9d8e43472d98", + "comment": "ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing." + } + ], + "minor": [ + { + "author": "Lambert Wang ", + "commit": "fe1c0f061947e66f1a3c63b168cdfecdc282b39b", + "comment": "[SpinButton] Implemented precision" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`" + } + ] + } + }, { "version": "5.45.3", "tag": "office-ui-fabric-react_v5.45.3", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index d71482ee346376..842cd7400767a9 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,17 @@ # Change Log - office-ui-fabric-react -This log was last generated on Fri, 02 Feb 2018 11:24:16 GMT and should not be manually modified. +This log was last generated on Mon, 05 Feb 2018 11:24:23 GMT and should not be manually modified. + +## 5.46.0 +Mon, 05 Feb 2018 11:24:23 GMT + +### Minor changes + +- [SpinButton] Implemented precision + +### Patches + +- ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing. ## 5.45.3 Fri, 02 Feb 2018 11:24:16 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 2196d98549c8ae..3d95dd7df13821 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.45.3", + "version": "5.46.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -51,7 +51,7 @@ "@uifabric/icons": ">=5.4.2 <6.0.0", "@uifabric/merge-styles": ">=5.11.0 <6.0.0", "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.9.0 <6.0.0", + "@uifabric/utilities": ">=5.10.0 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/styling/package.json b/packages/styling/package.json index 5c9edbcaea5f18..a4f3f7607adc42 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/utilities": ">=5.9.0 <6.0.0", + "@uifabric/utilities": ">=5.10.0 <6.0.0", "@uifabric/merge-styles": ">=5.11.0 <6.0.0", "tslib": "^1.7.1" } diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json index 43df62c0fd494c..fb0d2d00550af7 100644 --- a/packages/utilities/CHANGELOG.json +++ b/packages/utilities/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/utilities", "entries": [ + { + "version": "5.10.0", + "tag": "@uifabric/utilities_v5.10.0", + "date": "Mon, 05 Feb 2018 11:24:23 GMT", + "comments": { + "minor": [ + { + "author": "Lambert Wang ", + "commit": "fe1c0f061947e66f1a3c63b168cdfecdc282b39b", + "comment": "[Math] implemented precision rounding functions" + } + ] + } + }, { "version": "5.9.0", "tag": "@uifabric/utilities_v5.9.0", diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index 3f4b42b99f7fe7..a8c13b5334fcc5 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/utilities -This log was last generated on Mon, 29 Jan 2018 11:23:40 GMT and should not be manually modified. +This log was last generated on Mon, 05 Feb 2018 11:24:23 GMT and should not be manually modified. + +## 5.10.0 +Mon, 05 Feb 2018 11:24:23 GMT + +### Minor changes + +- [Math] implemented precision rounding functions ## 5.9.0 Mon, 29 Jan 2018 11:23:40 GMT diff --git a/packages/utilities/package.json b/packages/utilities/package.json index f0afb8f04b651a..b633f3c5795ac0 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/utilities", - "version": "5.9.0", + "version": "5.10.0", "description": "Office UI Fabric utilities for building React components.", "main": "lib/index.js", "typings": "lib/index.d.ts", From d98ba978273b040546a36cc8144b8aa961235235 Mon Sep 17 00:00:00 2001 From: akashperfect Date: Tue, 6 Feb 2018 00:53:21 +0530 Subject: [PATCH 012/284] [DetailsList] Adding aria-describedby optional callback for each item (#3770) * Adding aria-describedby optional callback for each item * Adding npm run change * Update users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json * resolve comment by adding an extra line at EOF --- ...AddingAriaDescribedByForRows_2018-01-23-11-35.json | 11 +++++++++++ .../src/components/DetailsList/DetailsList.tsx | 2 ++ .../src/components/DetailsList/DetailsList.types.ts | 3 +++ .../src/components/DetailsList/DetailsRow.tsx | 4 ++++ 4 files changed, 20 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json diff --git a/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json b/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json new file mode 100644 index 00000000000000..6c6b4c4c3e17e9 --- /dev/null +++ b/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "DetailsList: Adding optional callback aria-describedby for each item in DetailsList", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "akashperfect@gmail.com" +} diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx index c5751ebc41a241..81e81101f4e81e 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx @@ -430,6 +430,7 @@ export class DetailsList extends BaseComponent, IWithViewpo /** Optional callback to get the aria-label string for a given item. */ getRowAriaLabel?: (item: any) => string; + /** Optional callback to get the aria-describedby IDs (space separated strings) of the elements that describe the item. */ + getRowAriaDescribedBy?: (item: any) => string; + /** Optional callback to get the item key, to be used in the selection and on render. */ getKey?: (item: any, index?: number) => string; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx index 6e53c0ddba93c7..c3900ee57e1f59 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx @@ -49,6 +49,7 @@ export interface IDetailsRowProps extends React.Props { checkboxVisibility?: CheckboxVisibility; collapseAllVisibility?: CollapseAllVisibility; getRowAriaLabel?: (item: any) => string; + getRowAriaDescribedBy?: (item: any) => string; checkButtonAriaLabel?: string; checkboxCellClassName?: string; className?: string; @@ -187,6 +188,7 @@ export class DetailsRow extends BaseComponent Date: Mon, 5 Feb 2018 13:31:59 -0800 Subject: [PATCH 013/284] BaseAutofill: move to be it's own component (#3877) * move base autofill and rename properly * adding files * adding change files * renamed to autofill * fixed rename * added a few more comments --- ...ct-move-baseautofill_2018-02-02-23-42.json | 11 + ...ct-move-baseautofill_2018-02-02-23-42.json | 11 + .../ExtendedPicker/BaseExtendedPicker.tsx | 12 +- .../BaseExtendedPicker.types.ts | 9 +- .../office-ui-fabric-react/src/Autofill.ts | 1 + .../Autofill.test.tsx} | 22 +- .../src/components/Autofill/Autofill.tsx | 287 ++++++++++++++++++ .../src/components/Autofill/Autofill.types.ts | 110 +++++++ .../src/components/Autofill/index.ts | 2 + .../src/components/ComboBox/ComboBox.tsx | 28 +- .../pickers/AutoFill/BaseAutoFill.tsx | 282 +---------------- .../pickers/AutoFill/BaseAutoFill.types.ts | 98 +----- .../src/components/pickers/BasePicker.tsx | 12 +- 13 files changed, 468 insertions(+), 417 deletions(-) create mode 100644 common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json create mode 100644 common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json create mode 100644 packages/office-ui-fabric-react/src/Autofill.ts rename packages/office-ui-fabric-react/src/components/{pickers/AutoFill/BaseAutoFill.test.tsx => Autofill/Autofill.test.tsx} (92%) create mode 100644 packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx create mode 100644 packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts create mode 100644 packages/office-ui-fabric-react/src/components/Autofill/index.ts diff --git a/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json b/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json new file mode 100644 index 00000000000000..e66e3ac2c6dc58 --- /dev/null +++ b/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "BasePicker: Use correct autofillnow", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "joschect@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json b/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json new file mode 100644 index 00000000000000..4f65b469aa918c --- /dev/null +++ b/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "BaseAutofill: Move to it's own component", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joschect@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index b02d495cb1d07f..20520fcac4cc13 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -9,7 +9,7 @@ import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; -import { BaseAutoFill } from 'office-ui-fabric-react/lib/components/pickers/AutoFill/BaseAutoFill'; +import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill'; import { IPickerItemProps, IInputProps } from 'office-ui-fabric-react/lib/Pickers'; import * as stylesImport from './BaseExtendedPicker.scss'; import { IBaseExtendedPickerProps, IBaseExtendedPicker } from './BaseExtendedPicker.types'; @@ -37,7 +37,7 @@ export class BaseExtendedPicker> extend public selectedItemsList: BaseSelectedItemsList>; protected root: HTMLElement; - protected input: BaseAutoFill; + protected input: Autofill; protected focusZone: FocusZone; protected selection: Selection; protected floatingPickerProps: IBaseFloatingPickerProps; @@ -80,7 +80,7 @@ export class BaseExtendedPicker> extend className, inputProps, disabled - } = this.props; + } = this.props; return (
> extend
{ this.props.headerComponent } { this.renderSelectedItemsList() } - { this.canAddItems() && (> extend } @autobind - protected onInputFocus(ev: React.FocusEvent): void { + protected onInputFocus(ev: React.FocusEvent): void { this.selectedItemsList.unselectAll(); this.floatingPicker.showPicker(); @@ -194,7 +194,7 @@ export class BaseExtendedPicker> extend return; } if (this.state.items.length && !this.input || !this.input.isValueSelected) { - if ((this.input as BaseAutoFill).cursorLocation === 0) { + if ((this.input as Autofill).cursorLocation === 0) { this.selectedItemsList.removeItemAt(this.items.length - 1); this._onSelectedItemsChanged(); } diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts index 49b9a584262b8c..df410ca4b822be 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { BaseAutoFill, IInputProps } from 'office-ui-fabric-react/lib/Pickers'; +import { Autofill } from 'office-ui-fabric-react/lib/Autofill'; +import { IInputProps } from 'office-ui-fabric-react/lib/Pickers'; import { IBaseFloatingPickerProps } from '../../FloatingPicker'; import { IBaseSelectedItemsListProps } from '../../SelectedItemsList'; @@ -41,12 +42,12 @@ export interface IBaseExtendedPickerProps { /** * A callback for when the user put focus on the picker */ - onFocus?: React.FocusEventHandler; + onFocus?: React.FocusEventHandler; /** * A callback for when the user moves the focus away from the picker */ - onBlur?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; /** * ClassName for the picker. @@ -74,7 +75,7 @@ export interface IBaseExtendedPickerProps { selectedItemsListProps: IBaseSelectedItemsListProps; /** - * AutoFill input native props + * Autofill input native props * @default undefined */ inputProps?: IInputProps; diff --git a/packages/office-ui-fabric-react/src/Autofill.ts b/packages/office-ui-fabric-react/src/Autofill.ts new file mode 100644 index 00000000000000..148455296e48ff --- /dev/null +++ b/packages/office-ui-fabric-react/src/Autofill.ts @@ -0,0 +1 @@ +export * from './components/Autofill/index'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx similarity index 92% rename from packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx rename to packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx index a1da2465c6150c..4f2963461f5c58 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx @@ -5,18 +5,18 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; -import { KeyCodes } from '../../../Utilities'; -import { BaseAutoFill } from './BaseAutoFill'; +import { KeyCodes } from '../../Utilities'; +import { Autofill } from './Autofill'; -describe('BaseAutoFill', () => { - let autoFill: BaseAutoFill; +describe('Autofill', () => { + let autoFill: Autofill; let autoFillInput: HTMLInputElement; let baseNode = document.createElement('div'); document.body.appendChild(baseNode); beforeEach(() => { let component = ReactDOM.render( - autoFill = c! } suggestedDisplayValue='hello' />, @@ -33,7 +33,7 @@ describe('BaseAutoFill', () => { }; ReactDOM.render( - autoFill = c! } onInputValueChange={ onInputValueChange } suggestedDisplayValue='hello' @@ -43,7 +43,7 @@ describe('BaseAutoFill', () => { autoFillInput.value = 'hel'; ReactTestUtils.Simulate.change(autoFillInput); ReactDOM.render( - autoFill = c! } onInputValueChange={ onInputValueChange } suggestedDisplayValue='hello' @@ -63,7 +63,7 @@ describe('BaseAutoFill', () => { autoFillInput.value = 'hep'; ReactTestUtils.Simulate.change(autoFillInput); ReactDOM.render( - autoFill = c! } onInputValueChange={ onInputValueChange } suggestedDisplayValue='hello' @@ -78,7 +78,7 @@ describe('BaseAutoFill', () => { ReactTestUtils.Simulate.change(autoFillInput); ReactDOM.render( - autoFill = c! } suggestedDisplayValue='hello' />, @@ -102,7 +102,7 @@ describe('BaseAutoFill', () => { ReactTestUtils.Simulate.change(autoFillInput); ReactDOM.render( - autoFill = c! } suggestedDisplayValue='hello' />, @@ -121,7 +121,7 @@ describe('BaseAutoFill', () => { ReactTestUtils.Simulate.change(autoFillInput); ReactDOM.render( - autoFill = c! } suggestedDisplayValue='hello' />, diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx new file mode 100644 index 00000000000000..4d40ee53a5963f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx @@ -0,0 +1,287 @@ +import * as React from 'react'; +import { IAutofillProps, IAutofill } from './Autofill.types'; +import { + BaseComponent, + KeyCodes, + autobind, + getNativeProps, + inputProperties +} from '../../Utilities'; + +export interface IAutofillState { + displayValue?: string; +} + +const SELECTION_FORWARD = 'forward'; +const SELECTION_BACKWARD = 'backward'; + +export class Autofill extends BaseComponent implements IAutofill { + + public static defaultProps = { + enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up] + }; + + private _inputElement: HTMLInputElement; + private _autoFillEnabled: boolean = true; + private _value: string; + + constructor(props: IAutofillProps) { + super(props); + this._value = ''; + this.state = { + displayValue: props.defaultVisibleValue || '' + }; + } + + public get cursorLocation(): number { + if (this._inputElement) { + let inputElement = this._inputElement; + if (inputElement.selectionDirection !== SELECTION_FORWARD) { + return inputElement.selectionEnd; + } else { + return inputElement.selectionStart; + } + } else { + return -1; + } + } + + public get isValueSelected(): boolean { + return this.inputElement.selectionStart !== this.inputElement.selectionEnd; + } + + public get value(): string { + return this._value; + } + + public get selectionStart(): number { + return this._inputElement ? this._inputElement.selectionStart : -1; + } + + public get selectionEnd(): number { + return this._inputElement ? this._inputElement.selectionEnd : -1; + } + + public get inputElement(): HTMLInputElement { + return this._inputElement; + } + + public componentWillReceiveProps(nextProps: IAutofillProps) { + let newValue; + + if (this.props.updateValueInWillReceiveProps) { + newValue = this.props.updateValueInWillReceiveProps(); + } + + newValue = this._getDisplayValue(newValue ? newValue : this._value, nextProps.suggestedDisplayValue); + + if (typeof newValue === 'string') { + this.setState({ displayValue: newValue }); + } + } + + public componentDidUpdate() { + let value = this._value; + let { + suggestedDisplayValue, + shouldSelectFullInputValueInComponentDidUpdate + } = this.props; + let differenceIndex = 0; + + if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) { + let shouldSelectFullRange = false; + + if (shouldSelectFullInputValueInComponentDidUpdate) { + shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate(); + } + + if (shouldSelectFullRange) { + this._inputElement.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); + } else { + while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) { + differenceIndex++; + } + if (differenceIndex > 0) { + this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); + } + } + } + } + + public render() { + let { + displayValue + } = this.state; + + const nativeProps = getNativeProps(this.props, inputProperties); + return ( + + ); + } + + public focus() { + this._inputElement.focus(); + } + + public clear() { + this._autoFillEnabled = true; + this._updateValue(''); + this._inputElement.setSelectionRange(0, 0); + } + + // Composition events are used when the character/text requires several keystrokes to be completed. + // Some examples of this are mobile text input and langauges like Japanese or Arabic. + // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart + @autobind + private _onCompositionStart(ev: React.CompositionEvent) { + this._autoFillEnabled = false; + } + + // Composition events are used when the character/text requires several keystrokes to be completed. + // Some examples of this are mobile text input and langauges like Japanese or Arabic. + // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart + @autobind + private _onCompositionEnd(ev: React.CompositionEvent) { + let inputValue = this._getCurrentInputValue(); + this._tryEnableAutofill(inputValue, this.value, false, true); + // Due to timing, this needs to be async, otherwise no text will be selected. + this._async.setTimeout(() => this._updateValue(inputValue), 0); + } + + @autobind + private _onClick() { + if (this._value && this._value !== '' && this._autoFillEnabled) { + this._autoFillEnabled = false; + } + } + + @autobind + private _onKeyDown(ev: React.KeyboardEvent) { + if (this.props.onKeyDown) { + this.props.onKeyDown(ev); + } + + // If the event is actively being composed, then don't alert autofill. + // Right now typing does not have isComposing, once that has been fixed any should be removed. + if (!(ev.nativeEvent as any).isComposing) { + switch (ev.which) { + case KeyCodes.backspace: + this._autoFillEnabled = false; + break; + case KeyCodes.left: + case KeyCodes.right: + if (this._autoFillEnabled) { + this._value = this.state.displayValue!; + this._autoFillEnabled = false; + } + break; + default: + if (!this._autoFillEnabled) { + if (this.props.enableAutofillOnKeyPress!.indexOf(ev.which) !== -1) { + this._autoFillEnabled = true; + } + } + break; + } + } + } + + @autobind + private _onChange(ev: React.FormEvent) { + let value: string = this._getCurrentInputValue(ev); + // Right now typing does not have isComposing, once that has been fixed any should be removed. + this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing); + this._updateValue(value); + } + + private _getCurrentInputValue(ev?: React.FormEvent): string { + if (ev && ev.target && (ev.target as any).value) { + return (ev.target as any).value; + } else { + return this._inputElement.value; + } + } + + /** + * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value, + * whether or not any text is selected, and only if the new input value is longer than the old input value. + * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then + * it should be completed. + * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition. + * @param newValue + * @param oldValue + * @param isComposing if true then the text is actively being composed and it has not completed. + * @param isComposed if the text is a composed text value. + */ + private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) { + if (!isComposing + && newValue + && this._inputElement.selectionStart === newValue.length + && !this._autoFillEnabled + && (newValue.length > oldValue.length || isComposed)) { + this._autoFillEnabled = true; + } + } + + private _notifyInputChange(newValue: string) { + if (this.props.onInputValueChange) { + this.props.onInputValueChange(newValue); + } + } + + /** + * Updates the current input value as well as getting a new display value. + * @param newValue The new value from the input + */ + @autobind + private _updateValue(newValue: string) { + this._value = this.props.onInputChange ? this.props.onInputChange(newValue) : newValue; + this.setState({ + displayValue: this._getDisplayValue(this._value, this.props.suggestedDisplayValue) + }, () => this._notifyInputChange(this._value)); + } + + /** + * Returns a string that should be used as the display value. + * It evaluates this based on whether or not the suggested value starts with the input value + * and whether or not autofill is enabled. + * @param inputValue the value that the input currently has. + * @param suggestedDisplayValue the possible full value + */ + private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) { + let displayValue = inputValue; + if (suggestedDisplayValue + && inputValue + && this._doesTextStartWith(suggestedDisplayValue, displayValue) + && this._autoFillEnabled) { + displayValue = suggestedDisplayValue; + } + return displayValue; + } + + private _doesTextStartWith(text: string, startWith: string) { + if (!text || !startWith) { + return false; + } + return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0; + } +} + +/** + * Legacy, @deprecated, do not use. + */ +export class BaseAutoFill extends Autofill { + +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts new file mode 100644 index 00000000000000..eede0c7114c056 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts @@ -0,0 +1,110 @@ +import * as React from 'react'; +import { Autofill } from './Autofill'; +import { KeyCodes } from '../../Utilities'; +export interface IAutofill { + + /** + * The current index of the cursor in the input area. Returns -1 if the input element + * is not ready. + */ + cursorLocation: number; + /** + * A boolean for whether or not there is a value selected in the input area. + */ + isValueSelected: boolean; + /** + * The current text value that the user has entered. + */ + value: string; + /** + * The current index of where the selection starts. Returns -1 if the input element + * is not ready. + */ + selectionStart: number; + /** + * the current index of where the selection ends. Returns -1 if the input element + * is not ready. + */ + selectionEnd: number; + /** + * The current input element. + */ + inputElement: HTMLInputElement; + /** + * Focus the input element. + */ + focus(): void; + /** + * Clear all text in the input. Sets value to ''; + */ + clear(): void; +} + +export interface IAutofillProps extends + React.InputHTMLAttributes { + /** + * Gets the compoonent ref. + */ + componentRef?: (componentRef?: IAutofill) => void; + + /** + * The suggested autofill value that will display. + */ + suggestedDisplayValue?: string; + + /** + * A callback for when the current input value changes. + */ + onInputValueChange?: (newValue?: string) => void; + + /** + * When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled + * Since the user has taken control. It is automatically reenabled when the user enters text and the + * cursor is at the end of the text in the input box. This specifies other key presses that will reenabled + * autofill. + * @default [KeyCodes.down, KeyCodes.up] + */ + enableAutofillOnKeyPress?: KeyCodes[]; + + /** + * the default value to be visible + */ + defaultVisibleValue?: string; + + /** + * Handler for checking and updating the value if needed + * in componentWillReceiveProps + * + * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed + * in to the auto fill's componentWillReceiveProps + * @returns {string} - the updated value to set, if needed + */ + updateValueInWillReceiveProps?: () => string | null; + + /** + * Handler for checking if the full value of the input should + * be seleced in componentDidUpdate + * + * @returns {boolean} - should the full value of the input be selected? + */ + shouldSelectFullInputValueInComponentDidUpdate?: () => boolean; + + /** + * A callback used to modify the input string. + */ + onInputChange?: (value: string) => string; +} + +/** + * @deprecated do not use, will be removed in 6.0 +*/ +export interface IBaseAutoFill extends IAutofill { + +} + +/** + * @deprecated do not use, will be removed in 6.0 +*/ +export interface IBaseAutoFillProps extends IAutofillProps { + +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Autofill/index.ts b/packages/office-ui-fabric-react/src/components/Autofill/index.ts new file mode 100644 index 00000000000000..1fc84edb0d62f0 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Autofill/index.ts @@ -0,0 +1,2 @@ +export * from './Autofill'; +export * from './Autofill.types'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 30a8992faae931..1d5e0e94c82bde 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -7,7 +7,7 @@ import { CommandButton, IconButton } from '../../Button'; -import { BaseAutoFill } from '../pickers/AutoFill/BaseAutoFill'; +import { Autofill } from '../Autofill/Autofill'; import { autobind, BaseComponent, @@ -94,7 +94,7 @@ export class ComboBox extends BaseComponent { }; // The input aspect of the comboBox - private _comboBox: BaseAutoFill; + private _comboBox: Autofill; // The wrapping div of the input and button private _comboBoxWrapper: HTMLDivElement; @@ -295,7 +295,7 @@ export class ComboBox extends BaseComponent { ); return ( -
+
{ label && ( ) } @@ -304,7 +304,7 @@ export class ComboBox extends BaseComponent { id={ id + 'wrapper' } className={ this._classNames.root } > - { onBlur={ this._onBlur } onKeyDown={ this._onInputKeyDown } onKeyUp={ this._onInputKeyUp } - onClick={ this._onBaseAutofillClick } + onClick={ this._onAutofillClick } onInputValueChange={ this._onInputChange } aria-expanded={ isOpen } aria-autocomplete={ this._getAriaAutoCompleteValue() } @@ -330,8 +330,8 @@ export class ComboBox extends BaseComponent { spellCheck={ false } defaultVisibleValue={ this._currentVisibleValue } suggestedDisplayValue={ suggestedDisplayValue } - updateValueInWillReceiveProps={ this._onUpdateValueInAutoFillWillReceiveProps } - shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutoFillComponentDidUpdate } + updateValueInWillReceiveProps={ this._onUpdateValueInAutofillWillReceiveProps } + shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutofillComponentDidUpdate } title={ title } /> { /** * componentWillReceiveProps handler for the auto fill component * Checks/updates the iput value to set, if needed - * @param {IBaseAutoFillProps} defaultVisibleValue - the defaultVisibleValue that got passed + * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed * in to the auto fill's componentWillReceiveProps * @returns {string} - the updated value to set, if needed */ @autobind - private _onUpdateValueInAutoFillWillReceiveProps(): string | null { + private _onUpdateValueInAutofillWillReceiveProps(): string | null { if (this._comboBox === null || this._comboBox === undefined) { return null; } @@ -422,7 +422,7 @@ export class ComboBox extends BaseComponent { * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise */ @autobind - private _onShouldSelectFullInputValueInAutoFillComponentDidUpdate(): boolean { + private _onShouldSelectFullInputValueInAutofillComponentDidUpdate(): boolean { return this._currentVisibleValue === this.state.suggestedDisplayValue; } @@ -1247,7 +1247,7 @@ export class ComboBox extends BaseComponent { * @param ev - The keyboard event that was fired */ @autobind - private _onInputKeyDown(ev: React.KeyboardEvent) { + private _onInputKeyDown(ev: React.KeyboardEvent) { let { disabled, allowFreeform, @@ -1410,7 +1410,7 @@ export class ComboBox extends BaseComponent { * @param ev - the keyboard event that was fired */ @autobind - private _onInputKeyUp(ev: React.KeyboardEvent) { + private _onInputKeyUp(ev: React.KeyboardEvent) { let { disabled, allowFreeform, @@ -1477,7 +1477,7 @@ export class ComboBox extends BaseComponent { * eating the required key event when disabled * @param ev - the keyboard event that was fired */ - private _handleInputWhenDisabled(ev: React.KeyboardEvent | null) { + private _handleInputWhenDisabled(ev: React.KeyboardEvent | null) { // If we are disabled, close the menu (if needed) // and eat all keystokes other than TAB or ESC if (this.props.disabled) { @@ -1516,7 +1516,7 @@ export class ComboBox extends BaseComponent { * Click handler for the autofill. */ @autobind - private _onBaseAutofillClick() { + private _onAutofillClick() { if (this.props.allowFreeform) { this.focus(this.state.isOpen); } else { diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index 72e5b83f51a1e4..e03bbf9b3d2344 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -1,280 +1,2 @@ -import * as React from 'react'; -import { IBaseAutoFillProps, IBaseAutoFill } from './BaseAutoFill.types'; -import { - BaseComponent, - KeyCodes, - autobind, - getNativeProps, - inputProperties -} from '../../../Utilities'; - -export interface IBaseAutoFillState { - displayValue?: string; -} - -const SELECTION_FORWARD = 'forward'; -const SELECTION_BACKWARD = 'backward'; - -export class BaseAutoFill extends BaseComponent implements IBaseAutoFill { - - public static defaultProps = { - enableAutoFillOnKeyPress: [KeyCodes.down, KeyCodes.up] - }; - - private _inputElement: HTMLInputElement; - private _autoFillEnabled: boolean = true; - private _value: string; - - constructor(props: IBaseAutoFillProps) { - super(props); - this._value = ''; - this.state = { - displayValue: props.defaultVisibleValue || '' - }; - } - - public get cursorLocation(): number { - if (this._inputElement) { - let inputElement = this._inputElement; - if (inputElement.selectionDirection !== SELECTION_FORWARD) { - return inputElement.selectionEnd; - } else { - return inputElement.selectionStart; - } - } else { - return -1; - } - } - - public get isValueSelected(): boolean { - return this.inputElement.selectionStart !== this.inputElement.selectionEnd; - } - - public get value(): string { - return this._value; - } - - public get selectionStart(): number { - return this._inputElement ? this._inputElement.selectionStart : -1; - } - - public get selectionEnd(): number { - return this._inputElement ? this._inputElement.selectionEnd : -1; - } - - public get inputElement(): HTMLInputElement { - return this._inputElement; - } - - public componentWillReceiveProps(nextProps: IBaseAutoFillProps) { - let newValue; - - if (this.props.updateValueInWillReceiveProps) { - newValue = this.props.updateValueInWillReceiveProps(); - } - - newValue = this._getDisplayValue(newValue ? newValue : this._value, nextProps.suggestedDisplayValue); - - if (typeof newValue === 'string') { - this.setState({ displayValue: newValue }); - } - } - - public componentDidUpdate() { - let value = this._value; - let { - suggestedDisplayValue, - shouldSelectFullInputValueInComponentDidUpdate - } = this.props; - let differenceIndex = 0; - - if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) { - let shouldSelectFullRange = false; - - if (shouldSelectFullInputValueInComponentDidUpdate) { - shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate(); - } - - if (shouldSelectFullRange) { - this._inputElement.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); - } else { - while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) { - differenceIndex++; - } - if (differenceIndex > 0) { - this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); - } - } - } - } - - public render() { - let { - displayValue - } = this.state; - - const nativeProps = getNativeProps(this.props, inputProperties); - return ( - - ); - } - - public focus() { - this._inputElement.focus(); - } - - public clear() { - this._autoFillEnabled = true; - this._updateValue(''); - this._inputElement.setSelectionRange(0, 0); - } - - // Composition events are used when the character/text requires several keystrokes to be completed. - // Some examples of this are mobile text input and langauges like Japanese or Arabic. - // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart - @autobind - private _onCompositionStart(ev: React.CompositionEvent) { - this._autoFillEnabled = false; - } - - // Composition events are used when the character/text requires several keystrokes to be completed. - // Some examples of this are mobile text input and langauges like Japanese or Arabic. - // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart - @autobind - private _onCompositionEnd(ev: React.CompositionEvent) { - let inputValue = this._getCurrentInputValue(); - this._tryEnableAutofill(inputValue, this.value, false, true); - // Due to timing, this needs to be async, otherwise no text will be selected. - this._async.setTimeout(() => this._updateValue(inputValue), 0); - } - - @autobind - private _onClick() { - if (this._value && this._value !== '' && this._autoFillEnabled) { - this._autoFillEnabled = false; - } - } - - @autobind - private _onKeyDown(ev: React.KeyboardEvent) { - if (this.props.onKeyDown) { - this.props.onKeyDown(ev); - } - - // If the event is actively being composed, then don't alert autofill. - // Right now typing does not have isComposing, once that has been fixed any should be removed. - if (!(ev.nativeEvent as any).isComposing) { - switch (ev.which) { - case KeyCodes.backspace: - this._autoFillEnabled = false; - break; - case KeyCodes.left: - case KeyCodes.right: - if (this._autoFillEnabled) { - this._value = this.state.displayValue!; - this._autoFillEnabled = false; - } - break; - default: - if (!this._autoFillEnabled) { - if (this.props.enableAutoFillOnKeyPress!.indexOf(ev.which) !== -1) { - this._autoFillEnabled = true; - } - } - break; - } - } - } - - @autobind - private _onChange(ev: React.FormEvent) { - let value: string = this._getCurrentInputValue(ev); - // Right now typing does not have isComposing, once that has been fixed any should be removed. - this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing); - this._updateValue(value); - } - - private _getCurrentInputValue(ev?: React.FormEvent): string { - if (ev && ev.target && (ev.target as any).value) { - return (ev.target as any).value; - } else { - return this._inputElement.value; - } - } - - /** - * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value, - * whether or not any text is selected, and only if the new input value is longer than the old input value. - * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then - * it should be completed. - * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition. - * @param newValue - * @param oldValue - * @param isComposing if true then the text is actively being composed and it has not completed. - * @param isComposed if the text is a composed text value. - */ - private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) { - if (!isComposing - && newValue - && this._inputElement.selectionStart === newValue.length - && !this._autoFillEnabled - && (newValue.length > oldValue.length || isComposed)) { - this._autoFillEnabled = true; - } - } - - private _notifyInputChange(newValue: string) { - if (this.props.onInputValueChange) { - this.props.onInputValueChange(newValue); - } - } - - /** - * Updates the current input value as well as getting a new display value. - * @param newValue The new value from the input - */ - @autobind - private _updateValue(newValue: string) { - this._value = this.props.onInputChange ? this.props.onInputChange(newValue) : newValue; - this.setState({ - displayValue: this._getDisplayValue(this._value, this.props.suggestedDisplayValue) - }, () => this._notifyInputChange(this._value)); - } - - /** - * Returns a string that should be used as the display value. - * It evaluates this based on whether or not the suggested value starts with the input value - * and whether or not autofill is enabled. - * @param inputValue the value that the input currently has. - * @param suggestedDisplayValue the possible full value - */ - private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) { - let displayValue = inputValue; - if (suggestedDisplayValue - && inputValue - && this._doesTextStartWith(suggestedDisplayValue, displayValue) - && this._autoFillEnabled) { - displayValue = suggestedDisplayValue; - } - return displayValue; - } - - private _doesTextStartWith(text: string, startWith: string) { - if (!text || !startWith) { - return false; - } - return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0; - } -} \ No newline at end of file +// Deprecated, import directly from the component folder now. +export * from '../../Autofill/Autofill'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts index 80fdb4d2f021b9..cd9fc8b68cc370 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts @@ -1,96 +1,2 @@ -import * as React from 'react'; -import { BaseAutoFill } from './BaseAutoFill'; -import { KeyCodes } from '../../../Utilities'; -export interface IBaseAutoFill { - - /** - * The current index of the cursor in the input area. Returns -1 if the input element - * is not ready. - */ - cursorLocation: number; - /** - * A boolean for whether or not there is a value selected in the input area. - */ - isValueSelected: boolean; - /** - * The current text value that the user has entered. - */ - value: string; - /** - * The current index of where the selection starts. Returns -1 if the input element - * is not ready. - */ - selectionStart: number; - /** - * the current index of where the selection ends. Returns -1 if the input element - * is not ready. - */ - selectionEnd: number; - /** - * The current input element. - */ - inputElement: HTMLInputElement; - /** - * Focus the input element. - */ - focus(): void; - /** - * Clear all text in the input. Sets value to ''; - */ - clear(): void; -} - -export interface IBaseAutoFillProps extends - React.InputHTMLAttributes { - /** - * Gets the compoonent ref. - */ - componentRef?: (componentRef?: IBaseAutoFill) => void; - - /** - * The suggested autofill value that will display. - */ - suggestedDisplayValue?: string; - - /** - * A callback for when the current input value changes. - */ - onInputValueChange?: (newValue?: string) => void; - - /** - * When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled - * Since the user has taken control. It is automatically reenabled when the user enters text and the - * cursor is at the end of the text in the input box. This specifies other key presses that will reenabled - * autofill. - * @default [KeyCodes.down, KeyCodes.up] - */ - enableAutoFillOnKeyPress?: KeyCodes[]; - - /** - * the default value to be visible - */ - defaultVisibleValue?: string; - - /** - * Handler for checking and updating the value if needed - * in componentWillReceiveProps - * - * @param {IBaseAutoFillProps} defaultVisibleValue - the defaultVisibleValue that got passed - * in to the auto fill's componentWillReceiveProps - * @returns {string} - the updated value to set, if needed - */ - updateValueInWillReceiveProps?: () => string | null; - - /** - * Handler for checking if the full value of the input should - * be seleced in componentDidUpdate - * - * @returns {boolean} - should the full value of the input be selected? - */ - shouldSelectFullInputValueInComponentDidUpdate?: () => boolean; - - /** - * A callback used to modify the input string. - */ - onInputChange?: (value: string) => string; -} \ No newline at end of file +// Deprecated, import directly from the component folder now. +export * from '../../Autofill/Autofill.types'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index dd4d6a2900bfb0..b5473a54698110 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -12,7 +12,7 @@ import { Suggestions } from './Suggestions/Suggestions'; import { ISuggestionsProps } from './Suggestions/Suggestions.types'; import { SuggestionsController, ISuggestionModel } from './Suggestions/SuggestionsController'; import { IBasePicker, IBasePickerProps, ValidationState } from './BasePicker.types'; -import { BaseAutoFill } from './AutoFill/BaseAutoFill'; +import { Autofill } from '../Autofill/Autofill'; import { IPickerItemProps } from './PickerItem.types'; import { IPersonaProps } from '../Persona/Persona.types'; import * as stylesImport from './BasePicker.scss'; @@ -35,7 +35,7 @@ export class BasePicker> extends BaseComponent< protected selection: Selection; protected root: HTMLElement; - protected input: BaseAutoFill; + protected input: Autofill; protected focusZone: FocusZone; protected suggestionElement: Suggestions; @@ -191,7 +191,7 @@ export class BasePicker> extends BaseComponent<
{ this.renderItems() } - { this.canAddItems() && (> extends BaseComponent< } @autobind - protected onInputFocus(ev: React.FocusEvent) { + protected onInputFocus(ev: React.FocusEvent) { this.setState({ isFocused: true }); this.selection.setAllSelected(false); if (this.input && this.input.value === '' && this.props.onEmptyInputFocus) { @@ -437,7 +437,7 @@ export class BasePicker> extends BaseComponent< } @autobind - protected onInputBlur(ev: React.FocusEvent) { + protected onInputBlur(ev: React.FocusEvent) { this.setState({ isFocused: false }); } @@ -700,7 +700,7 @@ export class BasePickerListBelow> extends BaseP selectionMode={ SelectionMode.multiple } >
- Date: Mon, 5 Feb 2018 14:02:41 -0800 Subject: [PATCH 014/284] ExtendedPeoplePicker: change persona css (#3884) * change itemType name, item css * persona pill css * render functions for text and persona coin * changelist --- .../personaPill_2018-02-05-18-20.json | 11 ++ .../personaPill_2018-02-05-18-20.json | 11 ++ .../ExtendedPicker/BaseExtendedPicker.tsx | 2 +- .../PeoplePicker/ExtendedPeoplePicker.tsx | 9 +- .../ExtendedPeoplePicker.Basic.Example.tsx | 18 +-- .../examples/PeopleExampleData.ts | 42 +++++++ .../FloatingPicker/BaseFloatingPicker.tsx | 9 +- .../BaseFloatingPicker.types.ts | 6 +- .../PeoplePicker/FloatingPeoplePicker.tsx | 8 +- .../PeoplePickerItems/SelectedItemDefault.tsx | 3 +- .../FloatingPeoplePicker.Basic.Example.tsx | 10 +- .../BaseSelectedItemsList.tsx | 9 +- .../SelectedPeopleList/Items/EditingItem.tsx | 14 ++- .../Items/ExtendedSelectedItem.scss | 103 ++++++++++-------- .../Items/ExtendedSelectedItem.tsx | 14 +-- .../SelectedPeopleList/SelectedPeopleList.tsx | 14 ++- .../SelectedPeopleList.Basic.Example.scss | 4 + .../SelectedPeopleList.Basic.Example.tsx | 27 ++++- .../src/components/SelectedItemsList/index.ts | 3 +- .../Suggestions/SuggestionsController.ts | 2 +- 20 files changed, 221 insertions(+), 98 deletions(-) create mode 100644 common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json create mode 100644 common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json create mode 100644 packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss diff --git a/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json b/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json new file mode 100644 index 00000000000000..010a15a1e7e0d9 --- /dev/null +++ b/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "change persona pill css", + "type": "minor" + } + ], + "packageName": "@uifabric/experiments", + "email": "amyngu@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json b/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json new file mode 100644 index 00000000000000..c2bc72015aff6c --- /dev/null +++ b/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "fix deselect all in suggestionsController", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "amyngu@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index 20520fcac4cc13..a814d81153d811 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -96,7 +96,6 @@ export class BaseExtendedPicker> extend onKeyDown={ this.onBackspace } onCopy={ this.onCopy } > -
{ this.props.headerComponent } @@ -126,6 +125,7 @@ export class BaseExtendedPicker> extend ); } + @autobind protected onSelectionChange(): void { this.forceUpdate(); } diff --git a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx index e09881c71fca5a..11170195a87ee6 100644 --- a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx @@ -1,19 +1,20 @@ /* tslint:disable */ -import { IPickerItemProps, ValidationState } from 'office-ui-fabric-react/lib/Pickers'; +import { IPickerItemProps } from 'office-ui-fabric-react/lib/Pickers'; /* tslint:enable */ import { IExtendedPersonaProps } from '../../../SelectedItemsList'; +import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import './ExtendedPeoplePicker.scss'; import { BaseExtendedPicker } from '../BaseExtendedPicker'; import { IBaseExtendedPickerProps } from '../BaseExtendedPicker.types'; -export interface IPeoplePickerItemProps extends IPickerItemProps { +export interface IPeoplePickerItemProps extends IPickerItemProps { } -export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps { +export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps { } -export class BaseExtendedPeoplePicker extends BaseExtendedPicker { +export class BaseExtendedPeoplePicker extends BaseExtendedPicker { } export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker { diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index b8d38b35d3c203..f7e13e84bba915 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx @@ -7,14 +7,14 @@ import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; -import { IBasePickerSuggestionsProps, ValidationState, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; +import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; import { ExtendedPeoplePicker } from '../PeoplePicker/ExtendedPeoplePicker'; import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types'; import { people, mru, groupOne, groupTwo } from './PeopleExampleData'; import './ExtendedPeoplePicker.Basic.Example.scss'; import { FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../FloatingPicker'; -import { IBaseSelectedItemsListProps, IExtendedPersonaProps, ISelectedPeopleProps, SelectedPeopleList } +import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps } from '../../SelectedItemsList'; export interface IPeoplePickerExampleState { @@ -36,7 +36,7 @@ const suggestionProps: IBasePickerSuggestionsProps = { // tslint:disable-next-line:no-any export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeoplePickerExampleState> { private _picker: ExtendedPeoplePicker; - private _floatingPickerProps: IBaseFloatingPickerProps; + private _floatingPickerProps: IBaseFloatingPickerProps; private _selectedItemsListProps: ISelectedPeopleProps; constructor(props: {}) { @@ -55,7 +55,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP }; this._floatingPickerProps = { - suggestionsController: new SuggestionsController(), + suggestionsController: new SuggestionsController(), onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, @@ -113,7 +113,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP return
TO:
; } - private _onRenderFloatingPicker(props: IBaseFloatingPickerProps): JSX.Element { + private _onRenderFloatingPicker(props: IBaseFloatingPickerProps): JSX.Element { return (); } @@ -217,13 +217,13 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } @autobind - private _validateInput(input: string): ValidationState { + private _validateInput(input: string): boolean { if (input.indexOf('@') !== -1) { - return ValidationState.valid; + return true; } else if (input.length > 1) { - return ValidationState.warning; + return false; } else { - return ValidationState.invalid; + return false; } } diff --git a/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts b/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts index 10564ef8270c9a..fc064ccf50ac3e 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts +++ b/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts @@ -11,6 +11,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -21,6 +22,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -31,6 +33,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.dnd }, { @@ -41,6 +44,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -51,6 +55,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -61,6 +66,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -71,6 +77,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.away }, { @@ -81,6 +88,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -91,6 +99,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.dnd }, { @@ -101,6 +110,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -111,6 +121,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.none }, @@ -122,6 +133,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -132,6 +144,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -142,6 +155,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.blocked }, { @@ -152,6 +166,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'SDE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.blocked }, { @@ -162,6 +177,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'SE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.away }, { @@ -172,6 +188,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -182,6 +199,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Senior Manager of SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -192,6 +210,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Junior Manager of Software', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.away }, { @@ -202,6 +221,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.blocked }, { @@ -212,6 +232,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -222,6 +243,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -232,6 +254,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.blocked }, { @@ -242,6 +265,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -252,6 +276,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -262,6 +287,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', + isValid: true, presence: PersonaPresence.away }, { @@ -272,6 +298,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -282,6 +309,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -292,6 +320,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -302,6 +331,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.dnd }, { @@ -312,6 +342,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.blocked }, { @@ -322,6 +353,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -332,6 +364,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.away }, { @@ -342,6 +375,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -352,6 +386,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -362,6 +397,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.busy }, { @@ -372,6 +408,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.offline }, { @@ -382,6 +419,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -392,6 +430,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.dnd }, { @@ -402,6 +441,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', + isValid: true, presence: PersonaPresence.online }, { @@ -409,12 +449,14 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ imageInitials: 'GO', primaryText: 'Group One', canExpand: true, + isValid: true, }, { key: 42, imageInitials: 'GT', primaryText: 'Group Two', canExpand: true, + isValid: true, }, ]; diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx index f82f47b2cfcbde..a7da08048a00ac 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -7,7 +7,7 @@ import { getRTL } from '../../Utilities'; import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout'; -import { ValidationState, Suggestions, ISuggestionsProps, SuggestionsController, IBasePickerSuggestionsProps, ISuggestionModel } +import { Suggestions, ISuggestionsProps, SuggestionsController, IBasePickerSuggestionsProps, ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; import { IBaseFloatingPicker, IBaseFloatingPickerProps } from './BaseFloatingPicker.types'; import * as stylesImport from './BaseFloatingPicker.scss'; @@ -466,16 +466,15 @@ export class BaseFloatingPicker> extend private _onValidateInput(): void { if ( this.props.onValidateInput && - (this.props.onValidateInput as ((input: string) => ValidationState))(this.state.queryString) !== - ValidationState.invalid && + (this.props.onValidateInput as ((input: string) => boolean))(this.state.queryString) !== true && this.props.createGenericItem ) { let itemToConvert = (this.props.createGenericItem as (( input: string, - ValidationState: ValidationState + isValid: boolean ) => ISuggestionModel))( this.state.queryString, - (this.props.onValidateInput as ((input: string) => ValidationState))(this.state.queryString) + (this.props.onValidateInput as ((input: string) => boolean))(this.state.queryString) ); this.suggestionStore.createGenericSuggestion(itemToConvert); this.completeSuggestion(); diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts index a4e9c83f12feae..88669257e1275e 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts +++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ISuggestionModel, ValidationState, IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; +import { ISuggestionModel, IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; export interface IBaseFloatingPicker { @@ -84,7 +84,7 @@ export interface IBaseFloatingPickerProps extends React.Props { /** * A function used to validate if raw text entered into the well can be added */ - onValidateInput?: (input: string) => ValidationState; + onValidateInput?: (input: string) => boolean; /** * The text to display while searching for more results in a limited suggestions list */ @@ -95,7 +95,7 @@ export interface IBaseFloatingPickerProps extends React.Props { */ createGenericItem?: ( input: string, - ValidationState: ValidationState + isValid: boolean ) => ISuggestionModel; /** diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx index 39bb8945a12fa4..de027adbf47909 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx +++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx @@ -4,7 +4,7 @@ import { IBaseFloatingPickerProps } from '../BaseFloatingPicker.types'; import { SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import './PeoplePicker.scss'; -import { ValidationState, IBasePickerSuggestionsProps, ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; +import { IBasePickerSuggestionsProps, ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; export interface IPeopleFloatingPickerProps extends IBaseFloatingPickerProps { } @@ -21,16 +21,16 @@ export class FloatingPeoplePicker extends BaseFloatingPeoplePicker { }; } -export function createGenericItem(name: string, currentValidationState: ValidationState): ISuggestionModel { +export function createGenericItem(name: string, isValid: boolean): ISuggestionModel { // tslint:disable-next-line:no-any let personaToConvert: any = { key: name, primaryText: name, imageInitials: '!', - ValidationState: currentValidationState + isValid: isValid }; - if (currentValidationState !== ValidationState.warning) { + if (!isValid) { personaToConvert.imageInitials = getInitials(name, getRTL()); } diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx index 9ef6684af2a67f..1799e953076adc 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx +++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import { css, getId } from '../../../../Utilities'; import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona'; import { IPeoplePickerItemProps } from '../../../ExtendedPicker'; -import { ValidationState } from 'office-ui-fabric-react/lib/Pickers'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; import * as stylesImport from './PickerItemsDefault.scss'; // tslint:disable-next-line:no-any @@ -34,7 +33,7 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element 'ms-PickerPersona-container', styles.personaContainer, { ['is-selected ' + styles.personaContainerIsSelected]: selected }, - { ['is-invalid ' + styles.validationError]: item.ValidationState === ValidationState.warning } + { ['is-invalid ' + styles.validationError]: !item.isValid } ) } data-is-focusable={ true } data-is-sub-focuszone={ true } diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx index 2c27db626b9a48..6ec0079517a466 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx @@ -7,7 +7,7 @@ import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; -import { IBasePickerSuggestionsProps, ValidationState, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; +import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers'; import { IBaseFloatingPicker } from '../../BaseFloatingPicker.types'; import { FloatingPeoplePicker } from '../FloatingPeoplePicker'; import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types'; @@ -161,13 +161,13 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } @autobind - private _validateInput(input: string): ValidationState { + private _validateInput(input: string): boolean { if (input.indexOf('@') !== -1) { - return ValidationState.valid; + return true; } else if (input.length > 1) { - return ValidationState.warning; + return false; } else { - return ValidationState.invalid; + return false; } } } diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index 3e4791a6bceab8..b288ae1690b02d 100644 --- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -35,7 +35,9 @@ export class BaseSelectedItemsList> }; // Create a new selection if one is not specified - this.selection = this.props.selection ? this.props.selection as Selection : new Selection({ onSelectionChanged: this.forceUpdate }); + this.selection = this.props.selection + ? this.props.selection as Selection + : new Selection({ onSelectionChanged: this.onSelectionChanged }); } public get items(): T[] { @@ -130,6 +132,11 @@ export class BaseSelectedItemsList> })); } + @autobind + protected onSelectionChanged(): void { + this.forceUpdate(); + } + protected onChange(items?: T[]): void { if (this.props.onChange) { (this.props.onChange as (items?: T[]) => void)(items); diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 6ef143f7e5af06..17d6bb7b455028 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -6,6 +6,7 @@ import { FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../../../Floa import { ISelectedPeopleItemProps } from '../SelectedPeopleList'; import { IExtendedPersonaProps } from '../SelectedPeopleList'; import { IPeoplePickerItemState } from './ExtendedSelectedItem'; +import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import * as stylesImport from './EditingItem.scss'; @@ -15,8 +16,8 @@ const styles: any = stylesImport; export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps { // tslint:disable-next-line:no-any onEditingComplete: (oldItem: any, newItem: any) => void; - onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; - floatingPickerProps?: IBaseFloatingPickerProps; + onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; + floatingPickerProps?: IBaseFloatingPickerProps; getEditingItemText?: (item: IExtendedPersonaProps) => string; } @@ -34,6 +35,7 @@ export class EditingItem extends BaseComponent; } + @autobind public componentDidMount(): void { let getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string; let itemText = getEditingItemText(this.props.item); @@ -69,7 +71,7 @@ export class EditingItem extends BaseComponent): void { + if (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1) { + this._editingFloatingPicker.forceResolveSuggestion(); + } } @autobind diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss index 322c8b7bcd3c96..0c9387646b656e 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss @@ -5,24 +5,57 @@ border-radius: 15px; display: inline-flex; align-items: center; - background: $ms-color-neutralLighter; + background: $ms-color-themeLighterAlt; margin: 4px; cursor: default; user-select: none; - max-width: 300px; vertical-align: middle; position: relative; + // Setting global values here to override persona's normal behavior specifically in this selected variation + :global(.ms-Persona-primaryText) { + color: $ms-color-themeDark; + @include ms-font-m; + + &.hover { + color: $ms-color-themeDark; + } + + @include high-contrast { + color: HighlightText; + } + } + + .actionButton { + &:hover { + background: $ms-color-themeLight; + } + + :global(.ms-Button-icon) { + color: $ms-color-themeDark; + + @include high-contrast { + color: HighlightText; + } + } + } + &:hover { - background: $ms-color-neutralLight; + background: $ms-color-themeLighter; - .removeButton { - color: $ms-color-neutralPrimary; + // Setting global values here to override persona's normal behavior specifically in this selected variation + :global(.ms-Persona-primaryText) { + color: $ms-color-themeDark; + @include ms-font-m; + + @include high-contrast { + color: HighlightText; + } } } &.personaContainerIsSelected { - background: $ms-color-blue; + background: $ms-color-themePrimary; // Setting global values here to override persona's normal behavior specifically in this selected variation :global(.ms-Persona-primaryText) { @@ -34,18 +67,19 @@ } .actionButton { + color: $ms-color-white; + :global(.ms-Button-icon) { - color: $ms-color-white; + color: $ms-color-themeDark; + + &:hover { + background: $ms-color-themeDark; + } @include high-contrast { color: HighlightText; } } - - &:hover { - color: $ms-color-white; - background: $ms-color-themeDark; - } } @include high-contrast { @@ -58,26 +92,12 @@ &.validationError { // Setting global values here to override persona's normal behavior in the error version :global(.ms-Persona-primaryText) { - color: $ms-color-redDark; - border-bottom: 2px dotted $ms-color-redDark; + color: $ms-color-red; } :global(.ms-Persona-initials) { font-size: 20px; } - - &.personaContainerIsSelected { - background: $ms-color-redDark; - - :global(.ms-Persona-primaryText) { - color: $ms-color-white; - border-bottom: 2px dotted $ms-color-white; - } - - .removeButton:hover { - background: $ms-color-red; - } - } } @include high-contrast { @@ -96,33 +116,28 @@ .removeButton { border-radius: 15px; flex: 0 0 auto; - width: 28px; - height: 28px; - flex-basis: 28px; - - &:hover { - background: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralDark; - } + width: 33px; + height: 33px; + flex-basis: 32px; } .expandButton { border-radius: 15px 0px 0px 15px; - height: 28px; - flex-basis: 28px; - padding-right: 12px; + height: 33px; + width: 44px; + padding-right: 16px; position: inherit; - margin-right: -8px; - - &:hover { - background: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralDark; - } + display: flex; + margin-right: -17px; } .personaWrapper { position: relative; display: inherit; + + :global(.ms-Persona-details) { + padding: 0px 8px; + } } .personaDetails { diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx index f2802a5602b28c..8555a580eea3e1 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; /* tslint:enable */ import { BaseComponent, autobind, css, getId } from '../../../../Utilities'; -import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona'; -import { ValidationState } from 'office-ui-fabric-react/lib/Pickers'; +import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona'; import { ISelectedPeopleItemProps } from '../SelectedPeopleList'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu'; @@ -40,7 +39,7 @@ export class ExtendedSelectedItem extends BaseComponent
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx index ade17531c2ea36..28a951de54aa6b 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx @@ -1,24 +1,28 @@ /* tslint:disable */ import * as React from 'react'; -import { ValidationState } from 'office-ui-fabric-react/lib/Pickers'; /* tslint:enable */ import { BaseSelectedItemsList } from '../BaseSelectedItemsList'; import { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelectedItemsList.types'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem'; -import { autobind } from '../../../Utilities'; +import { autobind, IRenderFunction } from '../../../Utilities'; import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; import { IBaseFloatingPickerProps } from '../../../FloatingPicker'; import { EditingItem } from './Items/EditingItem'; export interface IExtendedPersonaProps extends IPersonaProps { + isValid: boolean; + blockRecipientRemoval?: boolean; + shouldBlockSelection?: boolean; canExpand?: boolean; isEditing?: boolean; } -export interface ISelectedPeopleItemProps extends ISelectedItemProps { +export interface ISelectedPeopleItemProps extends ISelectedItemProps { onExpandItem?: () => void; menuItems: IContextualMenuItem[]; + renderPersonaCoin?: IRenderFunction; + renderPrimaryText?: IRenderFunction; } export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps { @@ -27,8 +31,8 @@ export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps string; - onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; - floatingPickerProps?: IBaseFloatingPickerProps; + onRenderFloatingPicker?: (props: IBaseFloatingPickerProps) => JSX.Element; + floatingPickerProps?: IBaseFloatingPickerProps; } export class BasePeopleSelectedItemsList extends BaseSelectedItemsList { diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss new file mode 100644 index 00000000000000..8691a2ef04e0ea --- /dev/null +++ b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss @@ -0,0 +1,4 @@ +.persona { + fontSize: '14px'; + verticalAlign: '-webkit-baseline-middle' +} \ No newline at end of file diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx index e75b9d012cab06..245f2b544db3ed 100644 --- a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx +++ b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx @@ -8,8 +8,13 @@ import { import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; import { people, groupOne, groupTwo } from '../../ExtendedPicker'; import 'office-ui-fabric-react/lib/components/Pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss'; -import { IExtendedPersonaProps, SelectedPeopleList } from '../SelectedPeopleList/SelectedPeopleList'; +import { IExtendedPersonaProps, SelectedPeopleList, ISelectedPeopleItemProps } from '../SelectedPeopleList/SelectedPeopleList'; +import { ExtendedSelectedItem } from '../SelectedPeopleList/Items/ExtendedSelectedItem'; import { Selection } from 'office-ui-fabric-react/lib/Selection'; +import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; + +import * as styles from './SelectedPeopleList.Basic.Example.scss'; export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { private _selectionList: SelectedPeopleList; @@ -41,6 +46,26 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { copyMenuItemText={ 'Copy' } removeMenuItemText={ 'Remove' } selection={ this.selection } + onRenderItem={ this._onRenderItem } + /> + ); + } + + @autobind + private _onRenderItem(props: ISelectedPeopleItemProps): JSX.Element { + return ( + + ); + } + + private _renderPersonaElement(props: IPersonaProps, defaultRender: (props?: IPersonaProps) => JSX.Element | null): JSX.Element { + return ( + ); } diff --git a/packages/experiments/src/components/SelectedItemsList/index.ts b/packages/experiments/src/components/SelectedItemsList/index.ts index d89176bdc78f08..cd2a173d7958da 100644 --- a/packages/experiments/src/components/SelectedItemsList/index.ts +++ b/packages/experiments/src/components/SelectedItemsList/index.ts @@ -1,3 +1,4 @@ export * from './BaseSelectedItemsList.types'; export * from './BaseSelectedItemsList'; -export * from './SelectedPeopleList/SelectedPeopleList'; \ No newline at end of file +export * from './SelectedPeopleList/SelectedPeopleList'; +export * from './SelectedPeopleList/Items/ExtendedSelectedItem'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts index d6f1ddae8ddaf7..d35720a8a6c712 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts @@ -97,8 +97,8 @@ export class SuggestionsController { } public deselectAllSuggestions(): void { - this.currentIndex = -1; this.suggestions[this.currentIndex].selected = false; + this.currentIndex = -1; } public setSelectedSuggestion(index: number): void { From 857b101451a04bb20ee88d08b36511485939005d Mon Sep 17 00:00:00 2001 From: Lambert Wang Date: Mon, 5 Feb 2018 22:51:26 -0800 Subject: [PATCH 015/284] [provideUnits] Ignore line-height units (#3886) * [provideUnits] Ignore units for line-height * Change file --- .../law-ignoreLineHeightUnits_2018-02-06-01-03.json | 11 +++++++++++ .../merge-styles/src/transforms/provideUnits.test.ts | 10 ++++++++++ packages/merge-styles/src/transforms/provideUnits.ts | 1 + 3 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json diff --git a/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json b/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json new file mode 100644 index 00000000000000..644fe0498548dc --- /dev/null +++ b/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "[provideUnits] Add line-height to ignore", + "type": "patch" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "law@microsoft.com" +} \ No newline at end of file diff --git a/packages/merge-styles/src/transforms/provideUnits.test.ts b/packages/merge-styles/src/transforms/provideUnits.test.ts index e45391fc0d0094..faec99189df8ba 100644 --- a/packages/merge-styles/src/transforms/provideUnits.test.ts +++ b/packages/merge-styles/src/transforms/provideUnits.test.ts @@ -58,4 +58,14 @@ describe('provideUnits', () => { expect(testSet).toEqual(['opacity', '0']); }); + it('ignores line-height', () => { + const testSet = [ + 'line-height', + 1 + ]; + + provideUnits(testSet, 0); + + expect(testSet).toEqual(['line-height', '1']); + }); }); \ No newline at end of file diff --git a/packages/merge-styles/src/transforms/provideUnits.ts b/packages/merge-styles/src/transforms/provideUnits.ts index 2d2fe1e0189883..44ed365d77a93b 100644 --- a/packages/merge-styles/src/transforms/provideUnits.ts +++ b/packages/merge-styles/src/transforms/provideUnits.ts @@ -5,6 +5,7 @@ const NON_PIXEL_NUMBER_PROPS = [ 'flex', 'flex-grow', 'flex-shrink', + 'line-height', 'opacity', 'order', 'z-index', From 9e5eaed998fc7bae43f437bd2487a2de05a222db Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Tue, 6 Feb 2018 11:14:36 +0000 Subject: [PATCH 016/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...ct-move-baseautofill_2018-02-02-23-42.json | 11 ------- .../personaPill_2018-02-05-18-20.json | 11 ------- ...gnoreLineHeightUnits_2018-02-06-01-03.json | 11 ------- ...ct-move-baseautofill_2018-02-02-23-42.json | 11 ------- .../personaPill_2018-02-05-18-20.json | 11 ------- ...iaDescribedByForRows_2018-01-23-11-35.json | 11 ------- packages/experiments/CHANGELOG.json | 26 ++++++++++++++++ packages/experiments/CHANGELOG.md | 13 +++++++- packages/experiments/package.json | 4 +-- .../jest-serializer-merge-styles/package.json | 2 +- packages/merge-styles/CHANGELOG.json | 14 +++++++++ packages/merge-styles/CHANGELOG.md | 9 +++++- packages/merge-styles/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 31 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 14 ++++++++- packages/office-ui-fabric-react/package.json | 4 +-- packages/styling/package.json | 2 +- packages/utilities/package.json | 2 +- scripts/package.json | 2 +- 24 files changed, 118 insertions(+), 83 deletions(-) delete mode 100644 common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json delete mode 100644 common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json delete mode 100644 common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json delete mode 100644 common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json delete mode 100644 common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json delete mode 100644 common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 8951153cf1c2d1..7818339787a833 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.46.0 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 47e223913e7fba..082e7be1778099 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index e3505904309cdb..0858d09f23c0c0 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 66c2f41b20f56d..8d66ea9c0e243a 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index f34feafac2978a..206e2a459e4eee 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json b/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json deleted file mode 100644 index e66e3ac2c6dc58..00000000000000 --- a/common/changes/@uifabric/experiments/joschect-move-baseautofill_2018-02-02-23-42.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "BasePicker: Use correct autofillnow", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "joschect@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json b/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json deleted file mode 100644 index 010a15a1e7e0d9..00000000000000 --- a/common/changes/@uifabric/experiments/personaPill_2018-02-05-18-20.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "change persona pill css", - "type": "minor" - } - ], - "packageName": "@uifabric/experiments", - "email": "amyngu@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json b/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json deleted file mode 100644 index 644fe0498548dc..00000000000000 --- a/common/changes/@uifabric/merge-styles/law-ignoreLineHeightUnits_2018-02-06-01-03.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/merge-styles", - "comment": "[provideUnits] Add line-height to ignore", - "type": "patch" - } - ], - "packageName": "@uifabric/merge-styles", - "email": "law@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json b/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json deleted file mode 100644 index 4f65b469aa918c..00000000000000 --- a/common/changes/office-ui-fabric-react/joschect-move-baseautofill_2018-02-02-23-42.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "BaseAutofill: Move to it's own component", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "joschect@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json b/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json deleted file mode 100644 index c2bc72015aff6c..00000000000000 --- a/common/changes/office-ui-fabric-react/personaPill_2018-02-05-18-20.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "fix deselect all in suggestionsController", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "amyngu@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json b/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json deleted file mode 100644 index 6c6b4c4c3e17e9..00000000000000 --- a/common/changes/office-ui-fabric-react/users-akashperfect-DetailsList-AddingAriaDescribedByForRows_2018-01-23-11-35.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "DetailsList: Adding optional callback aria-describedby for each item in DetailsList", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "akashperfect@gmail.com" -} diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 3c41749f11535e..807c304c188d2c 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,32 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.18.0", + "tag": "@uifabric/experiments_v5.18.0", + "date": "Tue, 06 Feb 2018 11:14:36 GMT", + "comments": { + "patch": [ + { + "author": "Jon Schectman ", + "commit": "92c237d5804d8864ed44310ecb5ed93e835554e7", + "comment": "BasePicker: Use correct autofillnow" + } + ], + "minor": [ + { + "author": "amyngu <31973030+amyngu@users.noreply.github.com>", + "commit": "36c24d4e085515a0d74f2eb1b1cafd847af67667", + "comment": "change persona pill css" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.45.3 <6.0.0` to `>=5.47.0 <6.0.0`" + } + ] + } + }, { "version": "5.17.0", "tag": "@uifabric/experiments_v5.17.0", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index f1e74cc62e6ca8..c0cd5eb46fa381 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,17 @@ # Change Log - @uifabric/experiments -This log was last generated on Fri, 02 Feb 2018 11:24:16 GMT and should not be manually modified. +This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. + +## 5.18.0 +Tue, 06 Feb 2018 11:14:36 GMT + +### Minor changes + +- change persona pill css + +### Patches + +- BasePicker: Use correct autofillnow ## 5.17.0 Fri, 02 Feb 2018 11:24:16 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 63631ba3fecc31..6465019771703f 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.17.0", + "version": "5.18.0", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -44,7 +44,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.45.3 <6.0.0", + "office-ui-fabric-react": ">=5.47.0 <6.0.0", "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json index 6726de0dcab0e1..6eed5c6475a575 100644 --- a/packages/jest-serializer-merge-styles/package.json +++ b/packages/jest-serializer-merge-styles/package.json @@ -24,6 +24,6 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/merge-styles": ">=5.11.0 <6.0.0" + "@uifabric/merge-styles": ">=5.11.1 <6.0.0" } } \ No newline at end of file diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json index 43bf929efe8218..f60c89511b0230 100644 --- a/packages/merge-styles/CHANGELOG.json +++ b/packages/merge-styles/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/merge-styles", "entries": [ + { + "version": "5.11.1", + "tag": "@uifabric/merge-styles_v5.11.1", + "date": "Tue, 06 Feb 2018 11:14:36 GMT", + "comments": { + "patch": [ + { + "author": "Lambert Wang ", + "commit": "857b101451a04bb20ee88d08b36511485939005d", + "comment": "[provideUnits] Add line-height to ignore" + } + ] + } + }, { "version": "5.11.0", "tag": "@uifabric/merge-styles_v5.11.0", diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md index 93b7272d365802..ee2b9d9ae83d38 100644 --- a/packages/merge-styles/CHANGELOG.md +++ b/packages/merge-styles/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/merge-styles -This log was last generated on Thu, 25 Jan 2018 11:23:06 GMT and should not be manually modified. +This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. + +## 5.11.1 +Tue, 06 Feb 2018 11:14:36 GMT + +### Patches + +- [provideUnits] Add line-height to ignore ## 5.11.0 Thu, 25 Jan 2018 11:23:06 GMT diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json index 2990935f87fedb..ff80814be7ee23 100644 --- a/packages/merge-styles/package.json +++ b/packages/merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/merge-styles", - "version": "5.11.0", + "version": "5.11.1", "description": "Office UI Fabric style loading utilities.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 6d8caa415d360c..7365436a76b64f 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,37 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.47.0", + "tag": "office-ui-fabric-react_v5.47.0", + "date": "Tue, 06 Feb 2018 11:14:36 GMT", + "comments": { + "minor": [ + { + "author": "Jon Schectman ", + "commit": "92c237d5804d8864ed44310ecb5ed93e835554e7", + "comment": "BaseAutofill: Move to it's own component" + } + ], + "patch": [ + { + "author": "amyngu <31973030+amyngu@users.noreply.github.com>", + "commit": "36c24d4e085515a0d74f2eb1b1cafd847af67667", + "comment": "fix deselect all in suggestionsController" + }, + { + "author": "akashperfect ", + "commit": "d98ba978273b040546a36cc8144b8aa961235235", + "comment": "DetailsList: Adding optional callback aria-describedby for each item in DetailsList" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.0 <6.0.0` to `>=5.11.1 <6.0.0`" + } + ] + } + }, { "version": "5.46.0", "tag": "office-ui-fabric-react_v5.46.0", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 842cd7400767a9..6a8259b845b0ca 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,18 @@ # Change Log - office-ui-fabric-react -This log was last generated on Mon, 05 Feb 2018 11:24:23 GMT and should not be manually modified. +This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. + +## 5.47.0 +Tue, 06 Feb 2018 11:14:36 GMT + +### Minor changes + +- BaseAutofill: Move to it's own component + +### Patches + +- fix deselect all in suggestionsController +- DetailsList: Adding optional callback aria-describedby for each item in DetailsList ## 5.46.0 Mon, 05 Feb 2018 11:24:23 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 3d95dd7df13821..346126014e89d3 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.46.0", + "version": "5.47.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -49,7 +49,7 @@ "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/icons": ">=5.4.2 <6.0.0", - "@uifabric/merge-styles": ">=5.11.0 <6.0.0", + "@uifabric/merge-styles": ">=5.11.1 <6.0.0", "@uifabric/styling": ">=5.17.0 <6.0.0", "@uifabric/utilities": ">=5.10.0 <6.0.0", "prop-types": "^15.5.10", diff --git a/packages/styling/package.json b/packages/styling/package.json index a4f3f7607adc42..9d8b12ed9b279c 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -28,7 +28,7 @@ "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/utilities": ">=5.10.0 <6.0.0", - "@uifabric/merge-styles": ">=5.11.0 <6.0.0", + "@uifabric/merge-styles": ">=5.11.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/utilities/package.json b/packages/utilities/package.json index b633f3c5795ac0..33c909f5661bf7 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/merge-styles": ">=5.11.0 <6.0.0", + "@uifabric/merge-styles": ">=5.11.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/scripts/package.json b/scripts/package.json index 1b2a4ceeec5cd4..54d906ff19f311 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -11,7 +11,7 @@ "@microsoft/api-extractor": "^4.2.6", "@microsoft/load-themed-styles": "^1.7.13", "@microsoft/loader-load-themed-styles": "^1.6.0", - "@uifabric/merge-styles": ">=5.11.0 <6.0.0", + "@uifabric/merge-styles": ">=5.11.1 <6.0.0", "autoprefixer": "^7.1.5", "awesome-typescript-loader": "^3.2.3", "bundlesize": "^0.15.2", From d963888b02557a332d347520a44105c00b936d2b Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 6 Feb 2018 09:03:10 -0800 Subject: [PATCH 017/284] Revert "[provideUnits] Ignore line-height units" (#3892) * Revert "Applying package updates." This reverts commit 9e5eaed998fc7bae43f437bd2487a2de05a222db. * Revert "[provideUnits] Ignore line-height units (#3886)" This reverts commit 857b101451a04bb20ee88d08b36511485939005d. --- .../merge-styles/src/transforms/provideUnits.test.ts | 10 ---------- packages/merge-styles/src/transforms/provideUnits.ts | 1 - 2 files changed, 11 deletions(-) diff --git a/packages/merge-styles/src/transforms/provideUnits.test.ts b/packages/merge-styles/src/transforms/provideUnits.test.ts index faec99189df8ba..e45391fc0d0094 100644 --- a/packages/merge-styles/src/transforms/provideUnits.test.ts +++ b/packages/merge-styles/src/transforms/provideUnits.test.ts @@ -58,14 +58,4 @@ describe('provideUnits', () => { expect(testSet).toEqual(['opacity', '0']); }); - it('ignores line-height', () => { - const testSet = [ - 'line-height', - 1 - ]; - - provideUnits(testSet, 0); - - expect(testSet).toEqual(['line-height', '1']); - }); }); \ No newline at end of file diff --git a/packages/merge-styles/src/transforms/provideUnits.ts b/packages/merge-styles/src/transforms/provideUnits.ts index 44ed365d77a93b..2d2fe1e0189883 100644 --- a/packages/merge-styles/src/transforms/provideUnits.ts +++ b/packages/merge-styles/src/transforms/provideUnits.ts @@ -5,7 +5,6 @@ const NON_PIXEL_NUMBER_PROPS = [ 'flex', 'flex-grow', 'flex-shrink', - 'line-height', 'opacity', 'order', 'z-index', From 33f7c4d1d055f123cbf7237adc44e231b7efca1f Mon Sep 17 00:00:00 2001 From: Christian Gonzalez Date: Tue, 6 Feb 2018 14:30:48 -0800 Subject: [PATCH 018/284] Remove duplicate export from button index (#3899) * Remove duplicate command button export * Rush change --- .../chrisgo-duplicate-export_2018-02-06-21-59.json | 11 +++++++++++ .../src/components/Button/index.ts | 1 - 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json diff --git a/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json b/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json new file mode 100644 index 00000000000000..fdb76b2804a33c --- /dev/null +++ b/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Remove duplicate export of command button from the button index", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "christianjordangonzalez@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/index.ts b/packages/office-ui-fabric-react/src/components/Button/index.ts index 1a08c6eb8c8426..4bbc3726257095 100644 --- a/packages/office-ui-fabric-react/src/components/Button/index.ts +++ b/packages/office-ui-fabric-react/src/components/Button/index.ts @@ -6,7 +6,6 @@ export * from './CommandBarButton/CommandBarButton'; export * from './CommandButton/CommandButton'; export * from './CompoundButton/CompoundButton'; export * from './DefaultButton/DefaultButton'; -export * from './CommandButton/CommandButton'; export * from './MessageBarButton/MessageBarButton'; export * from './PrimaryButton/PrimaryButton'; export * from './IconButton/IconButton'; \ No newline at end of file From d121208b61c93811909fb69d2ba8d104c3531769 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 6 Feb 2018 21:24:34 -0800 Subject: [PATCH 019/284] SearchBox nullref fix (#3887) * Updates in rtlify and searchbox. * Adding changes. * Updates to tests. * Updating snapshot. * Updating the setting of rtl for mergeStyles. * Updating consts and comments. --- .../merge-fix_2018-02-06-06-06.json | 11 ++++ .../merge-fix_2018-02-06-06-06.json | 11 ++++ .../src/transforms/rtlifyRules.test.ts | 7 +++ .../src/transforms/rtlifyRules.ts | 62 +++++++++++++------ .../components/SearchBox/SearchBox.base.tsx | 1 - .../components/SearchBox/SearchBox.styles.tsx | 9 +-- .../__snapshots__/SearchBox.test.tsx.snap | 4 +- packages/utilities/src/rtl.ts | 3 + 8 files changed, 80 insertions(+), 28 deletions(-) create mode 100644 common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json create mode 100644 common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json diff --git a/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json b/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json new file mode 100644 index 00000000000000..7445be5e07e574 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "Adjusting rtl flipping logic to be more resilient to invalid styling.", + "type": "patch" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json b/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json new file mode 100644 index 00000000000000..b53d1683083b90 --- /dev/null +++ b/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: minor correction in hover styles.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/merge-styles/src/transforms/rtlifyRules.test.ts b/packages/merge-styles/src/transforms/rtlifyRules.test.ts index 74d9f87123a9a1..cff34694b45aa1 100644 --- a/packages/merge-styles/src/transforms/rtlifyRules.test.ts +++ b/packages/merge-styles/src/transforms/rtlifyRules.test.ts @@ -51,4 +51,11 @@ describe('rtlifyRules', () => { expect(rules).toEqual(['cursor', 'hand']); }); + it('does not crash when name or value are not strings', () => { + // tslint:disable:no-any + rtlifyRules(['left', null] as any, 0); + rtlifyRules(['left', {}] as any, 0); + rtlifyRules([null, 'abc'] as any, 0); + // tslint:enable:no-any + }); }); diff --git a/packages/merge-styles/src/transforms/rtlifyRules.ts b/packages/merge-styles/src/transforms/rtlifyRules.ts index af57b70ffc5285..211cf60772dea3 100644 --- a/packages/merge-styles/src/transforms/rtlifyRules.ts +++ b/packages/merge-styles/src/transforms/rtlifyRules.ts @@ -1,21 +1,28 @@ -const _nameReplacements: { [key: string]: string } = { - 'left': 'right', - 'right': 'left' +const LEFT = 'left'; +const RIGHT = 'right'; +const NO_FLIP = '@noflip'; +const NAME_REPLACEMENTS: { [key: string]: string } = { + [LEFT]: RIGHT, + [RIGHT]: LEFT }; - -const _valueReplacements: { [key: string]: string } = { +const VALUE_REPLACEMENTS: { [key: string]: string } = { 'w-resize': 'e-resize', 'sw-resize': 'se-resize', 'nw-resize': 'ne-resize' }; -const NO_FLIP = '@noflip'; - let _rtl = getRTL(); +/** + * Sets the current RTL value. + */ export function setRTL(isRTL: boolean): void { _rtl = isRTL; } + +/** + * Gets the current RTL value. + */ export function getRTL(): boolean { if (_rtl === undefined) { _rtl = ( @@ -27,28 +34,37 @@ export function getRTL(): boolean { return _rtl; } +/** + * RTLifies the rulePair in the array at the current index. This mutates the array for performance + * reasons. + */ export function rtlifyRules( rulePairs: (string | number)[], index: number ): void { if (getRTL()) { const name = rulePairs[index] as string; + + if (!name) { + return; + } + const value = rulePairs[index + 1] as string; - if (value.indexOf(NO_FLIP) >= 0) { + if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) { rulePairs[index + 1] = value.replace(/\s*(?:\/\*\s*)?\@noflip\b(?:\s*\*\/)?\s*?/g, ''); - } else if (name.indexOf('left') >= 0) { - rulePairs[index] = name.replace('left', 'right'); - } else if (name.indexOf('right') >= 0) { - rulePairs[index] = name.replace('right', 'left'); - } else if (String(value).indexOf('left') >= 0) { - rulePairs[index + 1] = value.replace('left', 'right'); - } else if (String(value).indexOf('right') >= 0) { - rulePairs[index + 1] = value.replace('right', 'left'); - } else if (_nameReplacements[name]) { - rulePairs[index] = _nameReplacements[name]; - } else if (_valueReplacements[value]) { - rulePairs[index + 1] = _valueReplacements[value]; + } else if (name.indexOf(LEFT) >= 0) { + rulePairs[index] = name.replace(LEFT, RIGHT); + } else if (name.indexOf(RIGHT) >= 0) { + rulePairs[index] = name.replace(RIGHT, LEFT); + } else if (String(value).indexOf(LEFT) >= 0) { + rulePairs[index + 1] = value.replace(LEFT, RIGHT); + } else if (String(value).indexOf(RIGHT) >= 0) { + rulePairs[index + 1] = value.replace(RIGHT, LEFT); + } else if (NAME_REPLACEMENTS[name]) { + rulePairs[index] = NAME_REPLACEMENTS[name]; + } else if (VALUE_REPLACEMENTS[value]) { + rulePairs[index + 1] = VALUE_REPLACEMENTS[value]; } else { switch (name) { case 'margin': @@ -63,6 +79,9 @@ export function rtlifyRules( } } +/** + * Given a string value in a space delimited format (e.g. "1 2 3 4"), negates a particular value. + */ function negateNum(value: string, partIndex: number): string { const parts = value.split(' '); const numberVal = parseInt(parts[partIndex], 10); @@ -72,6 +91,9 @@ function negateNum(value: string, partIndex: number): string { return parts.join(' '); } +/** + * Given a string quad, flips the left and right values. + */ function flipQuad(value: string): string { if (typeof value === 'string') { const parts = value.split(' '); diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index 956f56893e6086..b1f33e8e3512b0 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -3,7 +3,6 @@ import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './Searc import { BaseComponent, autobind, - css, getId, KeyCodes, customizable, diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 440765ee9d6aba..9299f4f6bcb456 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -33,12 +33,9 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { }, ':hover': { borderColor: palette.neutralDark, - $label: { - color: palette.black, - $iconContainer: { - color: palette.themeDark - } - } + }, + ':hover $iconContainer': { + color: palette.themeDark } } }, diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index 13129de5ee23a1..92af36c12bd500 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -32,9 +32,11 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` border: 1px solid WindowText; } &:hover { - $label: [object Object]; border-color: #212121; } + &:hover $iconContainer { + color: #005a9e; + } onFocusCapture={[Function]} >
Date: Tue, 6 Feb 2018 21:40:48 -0800 Subject: [PATCH 020/284] Updating test. --- apps/vr-tests/src/stories/Button.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/vr-tests/src/stories/Button.stories.tsx b/apps/vr-tests/src/stories/Button.stories.tsx index 00748de83e905e..bc51fdbfb90226 100644 --- a/apps/vr-tests/src/stories/Button.stories.tsx +++ b/apps/vr-tests/src/stories/Button.stories.tsx @@ -137,6 +137,7 @@ storiesOf('Button Split', module) .mouseDown('.ms-Button:nth-child(1)') .snapshot('pressed main', { cropTo: '.testWrapper' }) .hover('.ms-Button') // reset mouseDown + .mouseUp('.ms-Button:nth-child(2)') .mouseDown('.ms-Button:nth-child(2)') .snapshot('pressed split', { cropTo: '.testWrapper' }) .click('.ms-Button:nth-child(2)') From a47b964dde95fa4b4fd3e436025fada9f1affa12 Mon Sep 17 00:00:00 2001 From: Hlynur Tryggvason Date: Wed, 7 Feb 2018 06:54:15 +0100 Subject: [PATCH 021/284] [Spinner] Use rotateZ to stop the spinner from wiggling in IE (#3893) --- .../fix-spinner-ie-wiggle_2018-02-06-17-13.json | 11 +++++++++++ .../src/components/Spinner/Spinner.scss | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json diff --git a/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json b/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json new file mode 100644 index 00000000000000..4ad69ff7e1ea4f --- /dev/null +++ b/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "[Spinner] Use rotateZ to stop the spinner from wiggling in IE", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "hlynur.tryggvason@officeatwork.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss index 124073248b58bf..e5a2b7581fd87c 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss +++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss @@ -12,10 +12,10 @@ $borderSize: 1.5px; @keyframes spinAnimation { 0% { - transform: rotate(0deg); + transform: rotateZ(0deg); } 100% { - transform: rotate(360deg); + transform: rotateZ(360deg); } } From 48700c65292e57126b95be80c3092a39c6e171d0 Mon Sep 17 00:00:00 2001 From: Serkan Inci Date: Wed, 7 Feb 2018 01:04:40 -0500 Subject: [PATCH 022/284] Fixing direct reference to @uifabric/utilities/lib (#3889) --- .../@uifabric/utilities/master_2018-02-06-09-33.json | 11 +++++++++++ .../master_2018-02-06-09-33.json | 11 +++++++++++ .../src/components/ResizeGroup/ResizeGroup.tsx | 4 ++-- packages/utilities/src/index.ts | 1 + 4 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 common/changes/@uifabric/utilities/master_2018-02-06-09-33.json create mode 100644 common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json diff --git a/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json b/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json new file mode 100644 index 00000000000000..4dcea375c41651 --- /dev/null +++ b/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/utilities", + "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup", + "type": "patch" + } + ], + "packageName": "@uifabric/utilities", + "email": "serkani@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json b/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json new file mode 100644 index 00000000000000..5508d280f85adc --- /dev/null +++ b/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "serkani@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx index c8c486a47f3ea3..e5223f184f9d2d 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx @@ -4,9 +4,9 @@ import { BaseComponent, css, divProperties, - getNativeProps + getNativeProps, + provideContext } from '../../Utilities'; -import { provideContext } from '@uifabric/utilities/lib/Context'; import { IResizeGroupProps } from './ResizeGroup.types'; import * as styles from './ResizeGroup.scss'; diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts index 0a81bde68bc5d9..6349375a6812c3 100644 --- a/packages/utilities/src/index.ts +++ b/packages/utilities/src/index.ts @@ -1,6 +1,7 @@ export * from './Async'; export * from './AutoScroll'; export * from './BaseComponent'; +export * from './Context'; export * from './Customizations'; export * from './Customizer'; export * from './DelayedRender'; From e39a80a4bef31a9dd758933a35b2890a468726a8 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 6 Feb 2018 22:06:02 -0800 Subject: [PATCH 023/284] Search box base export (#3866) * exporting searchbox base * Change file --- .../searchBoxBase-export_2018-02-01-23-56.json | 11 +++++++++++ .../src/components/SearchBox/index.ts | 1 + 2 files changed, 12 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json diff --git a/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json b/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json new file mode 100644 index 00000000000000..c0500a8db5d1f2 --- /dev/null +++ b/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: Export base component as well as styled", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mgodbolt@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/index.ts b/packages/office-ui-fabric-react/src/components/SearchBox/index.ts index 47af0244f9f491..4f122e6c354ffd 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/index.ts +++ b/packages/office-ui-fabric-react/src/components/SearchBox/index.ts @@ -1,2 +1,3 @@ export * from './SearchBox'; +export * from './SearchBox.base'; export * from './SearchBox.types'; \ No newline at end of file From a91d1e819adc9c9b7973fc6fce0a9cd3a8c2ab4a Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Tue, 6 Feb 2018 22:17:46 -0800 Subject: [PATCH 024/284] Add fillHorizontal stretch mode to TilesList (#3862) * Add fillHorizontal grid mode to TilesList * Update change output --- .../tiles-mobile_2018-02-01-14-12.json | 11 ++++++++ .../src/components/TilesList/TilesList.tsx | 26 ++++++++++++++----- .../components/TilesList/TilesList.types.ts | 8 ++++-- .../TilesList/examples/ExampleHelpers.tsx | 12 ++++++--- 4 files changed, 44 insertions(+), 13 deletions(-) create mode 100644 common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json diff --git a/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json b/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json new file mode 100644 index 00000000000000..a9f1c99c10bd03 --- /dev/null +++ b/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Added a fillHorizontal mode to TilesList", + "type": "minor" + } + ], + "packageName": "@uifabric/experiments", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/TilesList/TilesList.tsx b/packages/experiments/src/components/TilesList/TilesList.tsx index e68fd816ed4a1c..13dfac23629ef3 100644 --- a/packages/experiments/src/components/TilesList/TilesList.tsx +++ b/packages/experiments/src/components/TilesList/TilesList.tsx @@ -148,9 +148,13 @@ export class TilesList extends React.Component, IT className={ css(TilesListStyles.cell) } // tslint:disable-next-line:jsx-ban-props style={ - { - paddingTop: `${(100 * itemHeightOverWidth).toFixed(2)}%` - } + item.grid.mode === TilesGridMode.fillHorizontal ? + { + height: `${item.grid.minRowHeight}px` + } : + { + paddingTop: `${(100 * itemHeightOverWidth).toFixed(2)}%` + } } >
extends React.Component, IT scaleFactor } = currentRow; - if (grid.mode === TilesGridMode.fill && (!currentRow.isLastRow || scaleFactor <= grid.maxScaleFactor)) { + if ((grid.mode === TilesGridMode.fill || + grid.mode === TilesGridMode.fillHorizontal) && + (!currentRow.isLastRow || + scaleFactor <= grid.maxScaleFactor)) { const finalScaleFactor = Math.min(grid.maxScaleFactor, scaleFactor); finalSize = { width: finalSize.width * finalScaleFactor, - height: finalSize.height * finalScaleFactor + height: grid.mode === TilesGridMode.fill ? + finalSize.height * finalScaleFactor : + grid.minRowHeight }; } } @@ -390,7 +399,10 @@ export class TilesList extends React.Component, IT currentRow.scaleFactor = (boundsWidth - totalMargin) / (rowWidth - totalMargin); } - if (!isAtGridEnd && currentRow.scaleFactor > (grid.mode === TilesGridMode.fill ? grid.maxScaleFactor : 1)) { + if (!isAtGridEnd && currentRow.scaleFactor > ( + grid.mode === TilesGridMode.fill || grid.mode === TilesGridMode.fillHorizontal ? + grid.maxScaleFactor : + 1)) { // If the last computed row is not the end of the grid, and the content cannot scale to fit the width, // declare these cells as 'extra' and let them be pushed into the next page. extraCells = cells.slice(rowStart, i); @@ -442,7 +454,7 @@ export class TilesList extends React.Component, IT const itemWidthOverHeight = item.aspectRatio || 1; const margin = grid.spacing / 2; - const isFill = gridMode === TilesGridMode.fill; + const isFill = gridMode === TilesGridMode.fill || gridMode === TilesGridMode.fillHorizontal; const width = itemWidthOverHeight * grid.minRowHeight; return { diff --git a/packages/experiments/src/components/TilesList/TilesList.types.ts b/packages/experiments/src/components/TilesList/TilesList.types.ts index 622e5e032ae275..43636b91c24cfe 100644 --- a/packages/experiments/src/components/TilesList/TilesList.types.ts +++ b/packages/experiments/src/components/TilesList/TilesList.types.ts @@ -36,9 +36,13 @@ export const enum TilesGridMode { */ stack, /** - * Items in the row are stretched if necessary to fill the row. + * Items in the row are stretched proportionally if necessary to fill the row. */ - fill + fill, + /** + * Items in the row are stretched horizontally only if necessary to fill the row. + */ + fillHorizontal } export interface ITilesGridSegment { diff --git a/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx b/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx index ef41583327410e..c6267a4d0974dc 100644 --- a/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx +++ b/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx @@ -78,10 +78,12 @@ export function createGroup(items: IExampleItem[], type: 'document' | 'media', i export function getTileCells(groups: IExampleGroup[], { onRenderCell, - onRenderHeader + onRenderHeader, + size = 'large' }: { onRenderHeader: (item: IExampleItem) => JSX.Element; onRenderCell: (item: IExampleItem, finalSize?: ITileSize) => JSX.Element; + size?: 'large' | 'small' }): (ITilesGridSegment | ITilesGridItem)[] { const items: (ITilesGridSegment | ITilesGridItem)[] = []; @@ -89,9 +91,9 @@ export function getTileCells(groups: IExampleGroup[], { const header: ITilesGridItem = { key: `header-${group.key}`, content: { - key: '', + key: group.key, aspectRatio: 1, - name: lorem(6), + name: group.name, index: group.index }, onRender: onRenderHeader @@ -118,7 +120,9 @@ export function getTileCells(groups: IExampleGroup[], { marginBottom: 40, minRowHeight: 171, mode: group.type === 'document' ? - TilesGridMode.stack : + size === 'small' ? + TilesGridMode.fillHorizontal : + TilesGridMode.stack : TilesGridMode.fill, key: group.key }); From a1cc06c6bbcd5aee03a690434b8e285d1be8817b Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Wed, 7 Feb 2018 11:23:59 +0000 Subject: [PATCH 025/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- .../tiles-mobile_2018-02-01-14-12.json | 11 ----- .../merge-fix_2018-02-06-06-06.json | 11 ----- .../utilities/master_2018-02-06-09-33.json | 11 ----- ...sgo-duplicate-export_2018-02-06-21-59.json | 11 ----- ...ix-spinner-ie-wiggle_2018-02-06-17-13.json | 11 ----- .../master_2018-02-06-09-33.json | 11 ----- .../merge-fix_2018-02-06-06-06.json | 11 ----- ...searchBoxBase-export_2018-02-01-23-56.json | 11 ----- packages/example-app-base/package.json | 2 +- packages/experiments/CHANGELOG.json | 19 ++++++++ packages/experiments/CHANGELOG.md | 9 +++- packages/experiments/package.json | 4 +- .../jest-serializer-merge-styles/package.json | 2 +- packages/merge-styles/CHANGELOG.json | 14 ++++++ packages/merge-styles/CHANGELOG.md | 9 +++- packages/merge-styles/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 44 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 16 ++++++- packages/office-ui-fabric-react/package.json | 6 +-- packages/styling/package.json | 4 +- packages/utilities/CHANGELOG.json | 19 ++++++++ packages/utilities/CHANGELOG.md | 9 +++- packages/utilities/package.json | 4 +- scripts/package.json | 2 +- 25 files changed, 149 insertions(+), 106 deletions(-) delete mode 100644 common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json delete mode 100644 common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json delete mode 100644 common/changes/@uifabric/utilities/master_2018-02-06-09-33.json delete mode 100644 common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json delete mode 100644 common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json delete mode 100644 common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json delete mode 100644 common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json delete mode 100644 common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 7818339787a833..f124dd16adc765 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json b/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json deleted file mode 100644 index a9f1c99c10bd03..00000000000000 --- a/common/changes/@uifabric/experiments/tiles-mobile_2018-02-01-14-12.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Added a fillHorizontal mode to TilesList", - "type": "minor" - } - ], - "packageName": "@uifabric/experiments", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json b/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json deleted file mode 100644 index 7445be5e07e574..00000000000000 --- a/common/changes/@uifabric/merge-styles/merge-fix_2018-02-06-06-06.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/merge-styles", - "comment": "Adjusting rtl flipping logic to be more resilient to invalid styling.", - "type": "patch" - } - ], - "packageName": "@uifabric/merge-styles", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json b/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json deleted file mode 100644 index 4dcea375c41651..00000000000000 --- a/common/changes/@uifabric/utilities/master_2018-02-06-09-33.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup", - "type": "patch" - } - ], - "packageName": "@uifabric/utilities", - "email": "serkani@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json b/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json deleted file mode 100644 index fdb76b2804a33c..00000000000000 --- a/common/changes/office-ui-fabric-react/chrisgo-duplicate-export_2018-02-06-21-59.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Remove duplicate export of command button from the button index", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "christianjordangonzalez@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json b/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json deleted file mode 100644 index 4ad69ff7e1ea4f..00000000000000 --- a/common/changes/office-ui-fabric-react/fix-spinner-ie-wiggle_2018-02-06-17-13.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "[Spinner] Use rotateZ to stop the spinner from wiggling in IE", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "hlynur.tryggvason@officeatwork.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json b/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json deleted file mode 100644 index 5508d280f85adc..00000000000000 --- a/common/changes/office-ui-fabric-react/master_2018-02-06-09-33.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "serkani@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json b/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json deleted file mode 100644 index b53d1683083b90..00000000000000 --- a/common/changes/office-ui-fabric-react/merge-fix_2018-02-06-06-06.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "SearchBox: minor correction in hover styles.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json b/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json deleted file mode 100644 index c0500a8db5d1f2..00000000000000 --- a/common/changes/office-ui-fabric-react/searchBoxBase-export_2018-02-01-23-56.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "SearchBox: Export base component as well as styled", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "mgodbolt@microsoft.com" -} \ No newline at end of file diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index da3e006af36f76..240c13e7d0e3bb 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.10.0 <6.0.0", + "@uifabric/utilities": ">=5.10.1 <6.0.0", "highlight.js": "^9.12.0", "office-ui-fabric-react": ">=5.1.0 <6.0.0", "tslib": "^1.7.1" diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 807c304c188d2c..fa2ba02414ce4c 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.19.0", + "tag": "@uifabric/experiments_v5.19.0", + "date": "Wed, 07 Feb 2018 11:23:59 GMT", + "comments": { + "minor": [ + { + "author": "Thomas Michon ", + "commit": "a91d1e819adc9c9b7973fc6fce0a9cd3a8c2ab4a", + "comment": "Added a fillHorizontal mode to TilesList" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.47.0 <6.0.0` to `>=5.48.0 <6.0.0`" + } + ] + } + }, { "version": "5.18.0", "tag": "@uifabric/experiments_v5.18.0", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index c0cd5eb46fa381..40fb694b5bce38 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/experiments -This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. +This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. + +## 5.19.0 +Wed, 07 Feb 2018 11:23:59 GMT + +### Minor changes + +- Added a fillHorizontal mode to TilesList ## 5.18.0 Tue, 06 Feb 2018 11:14:36 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 6465019771703f..624e934b15f473 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.18.0", + "version": "5.19.0", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -44,7 +44,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.0 <6.0.0", "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json index 6eed5c6475a575..9d4f4f562016f6 100644 --- a/packages/jest-serializer-merge-styles/package.json +++ b/packages/jest-serializer-merge-styles/package.json @@ -24,6 +24,6 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/merge-styles": ">=5.11.1 <6.0.0" + "@uifabric/merge-styles": ">=5.11.2 <6.0.0" } } \ No newline at end of file diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json index f60c89511b0230..38d3604da2e39d 100644 --- a/packages/merge-styles/CHANGELOG.json +++ b/packages/merge-styles/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/merge-styles", "entries": [ + { + "version": "5.11.2", + "tag": "@uifabric/merge-styles_v5.11.2", + "date": "Wed, 07 Feb 2018 11:23:59 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "d121208b61c93811909fb69d2ba8d104c3531769", + "comment": "Adjusting rtl flipping logic to be more resilient to invalid styling." + } + ] + } + }, { "version": "5.11.1", "tag": "@uifabric/merge-styles_v5.11.1", diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md index ee2b9d9ae83d38..b418f1158b389e 100644 --- a/packages/merge-styles/CHANGELOG.md +++ b/packages/merge-styles/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/merge-styles -This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. +This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. + +## 5.11.2 +Wed, 07 Feb 2018 11:23:59 GMT + +### Patches + +- Adjusting rtl flipping logic to be more resilient to invalid styling. ## 5.11.1 Tue, 06 Feb 2018 11:14:36 GMT diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json index ff80814be7ee23..4a9301242e3956 100644 --- a/packages/merge-styles/package.json +++ b/packages/merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/merge-styles", - "version": "5.11.1", + "version": "5.11.2", "description": "Office UI Fabric style loading utilities.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 7365436a76b64f..4d04e8d38173d6 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,50 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.48.0", + "tag": "office-ui-fabric-react_v5.48.0", + "date": "Wed, 07 Feb 2018 11:23:59 GMT", + "comments": { + "patch": [ + { + "author": "Christian Gonzalez ", + "commit": "33f7c4d1d055f123cbf7237adc44e231b7efca1f", + "comment": "Remove duplicate export of command button from the button index" + }, + { + "author": "Hlynur Tryggvason ", + "commit": "a47b964dde95fa4b4fd3e436025fada9f1affa12", + "comment": "[Spinner] Use rotateZ to stop the spinner from wiggling in IE" + }, + { + "author": "Serkan Inci ", + "commit": "48700c65292e57126b95be80c3092a39c6e171d0", + "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup" + }, + { + "author": "David Zearing ", + "commit": "d121208b61c93811909fb69d2ba8d104c3531769", + "comment": "SearchBox: minor correction in hover styles." + } + ], + "minor": [ + { + "author": "Micah Godbolt ", + "commit": "e39a80a4bef31a9dd758933a35b2890a468726a8", + "comment": "SearchBox: Export base component as well as styled" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.1 <6.0.0` to `>=5.11.2 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`" + } + ] + } + }, { "version": "5.47.0", "tag": "office-ui-fabric-react_v5.47.0", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 6a8259b845b0ca..a0a3bad52fb7ed 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,20 @@ # Change Log - office-ui-fabric-react -This log was last generated on Tue, 06 Feb 2018 11:14:36 GMT and should not be manually modified. +This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. + +## 5.48.0 +Wed, 07 Feb 2018 11:23:59 GMT + +### Minor changes + +- SearchBox: Export base component as well as styled + +### Patches + +- Remove duplicate export of command button from the button index +- [Spinner] Use rotateZ to stop the spinner from wiggling in IE +- Fixing direct reference to @uifabric/utilities/lib from ResizeGroup +- SearchBox: minor correction in hover styles. ## 5.47.0 Tue, 06 Feb 2018 11:14:36 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 346126014e89d3..f9dd78e63915e0 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.47.0", + "version": "5.48.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -49,9 +49,9 @@ "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/icons": ">=5.4.2 <6.0.0", - "@uifabric/merge-styles": ">=5.11.1 <6.0.0", + "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.10.0 <6.0.0", + "@uifabric/utilities": ">=5.10.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/styling/package.json b/packages/styling/package.json index 9d8b12ed9b279c..5c53f0ee320712 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -27,8 +27,8 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/utilities": ">=5.10.0 <6.0.0", - "@uifabric/merge-styles": ">=5.11.1 <6.0.0", + "@uifabric/utilities": ">=5.10.1 <6.0.0", + "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json index fb0d2d00550af7..a9c8f55adaa129 100644 --- a/packages/utilities/CHANGELOG.json +++ b/packages/utilities/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/utilities", "entries": [ + { + "version": "5.10.1", + "tag": "@uifabric/utilities_v5.10.1", + "date": "Wed, 07 Feb 2018 11:23:59 GMT", + "comments": { + "patch": [ + { + "author": "Serkan Inci ", + "commit": "48700c65292e57126b95be80c3092a39c6e171d0", + "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.1 <6.0.0` to `>=5.11.2 <6.0.0`" + } + ] + } + }, { "version": "5.10.0", "tag": "@uifabric/utilities_v5.10.0", diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index a8c13b5334fcc5..c4993a1d080848 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/utilities -This log was last generated on Mon, 05 Feb 2018 11:24:23 GMT and should not be manually modified. +This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. + +## 5.10.1 +Wed, 07 Feb 2018 11:23:59 GMT + +### Patches + +- Fixing direct reference to @uifabric/utilities/lib from ResizeGroup ## 5.10.0 Mon, 05 Feb 2018 11:24:23 GMT diff --git a/packages/utilities/package.json b/packages/utilities/package.json index 33c909f5661bf7..992be6b5372520 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/utilities", - "version": "5.10.0", + "version": "5.10.1", "description": "Office UI Fabric utilities for building React components.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -36,7 +36,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/merge-styles": ">=5.11.1 <6.0.0", + "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/scripts/package.json b/scripts/package.json index 54d906ff19f311..ed95b5f509b168 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -11,7 +11,7 @@ "@microsoft/api-extractor": "^4.2.6", "@microsoft/load-themed-styles": "^1.7.13", "@microsoft/loader-load-themed-styles": "^1.6.0", - "@uifabric/merge-styles": ">=5.11.1 <6.0.0", + "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "autoprefixer": "^7.1.5", "awesome-typescript-loader": "^3.2.3", "bundlesize": "^0.15.2", From 7533d0e07dbfda819c8761bce764b4bc4fabfcae Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Wed, 7 Feb 2018 10:00:24 -0800 Subject: [PATCH 026/284] Callout/Positioning: Fix RTL bug where alignment would be lost for some directionalhints (#3907) * fixed a bug where callout would lose alignment for some hints * adding change file * add a gap --- .../callout-rtlpositionfix_2018-02-07-01-43.json | 11 +++++++++++ .../src/utilities/positioning/positioning.ts | 7 +++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json diff --git a/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json b/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json new file mode 100644 index 00000000000000..24fe2e974adc88 --- /dev/null +++ b/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joschect@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts index 342e10776f8839..ed1975ab16ede5 100644 --- a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts +++ b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts @@ -455,9 +455,12 @@ export module positioningFunctions { ): IPositionDirectionalHintData { let positionInformation: IPositionDirectionalHintData = { ...DirectionalDictionary[directionalHint] }; if (getRTL()) { + // If alignment edge exists and that alignment edge is -2 or 2, right or left, then flip it. - positionInformation.alignmentEdge = positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0 - ? positionInformation.alignmentEdge * -1 : undefined; + if (positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0) { + positionInformation.alignmentEdge = positionInformation.alignmentEdge * -1; + } + return directionalHintForRTL !== undefined ? DirectionalDictionary[directionalHintForRTL] : positionInformation; From 38120bf5cbd359ee786a0746ce40fdec8eff4394 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Wed, 7 Feb 2018 12:03:27 -0800 Subject: [PATCH 027/284] Update STYLING.md --- ghdocs/STYLING.md | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/ghdocs/STYLING.md b/ghdocs/STYLING.md index ae05ec3fca7924..dd870c2d1085ae 100644 --- a/ghdocs/STYLING.md +++ b/ghdocs/STYLING.md @@ -195,36 +195,29 @@ export const ComponentName = styled( ); ``` -#### Support for customized sub component styling +#### Support for customizable sub-component styling -Note that the component may also intend to provide customized styling for nested components. For example, a `Breadcrumb` component may want to expose the `getStyles` function for nested `Crumb` components. +The component may also intend to provide customized styling for nested components. For example, a `Breadcrumb` component may want to render `Crumb` components, which may take in their own styles. -The extra getStyles function would be added to the outer compoent's props: +The recommended approach is to avoid exposing the individual `Crumb` props at the `Breadcrumb` layer. Instead, expose a way to provide an alternative component for the `Crumb` using the `as` prop convention. This lets the caller create their own `Crumb` variant and use it within the `Breadcrumb`. It also opens up other scenarios such as providing additional default props on the sub-component, or replacing it completely. -``` -getCrumbStyles?: IStyleFunction; -``` +In the `Breadcrumb` case, we would expose an optional `crumbAs` prop. This would allow the consumer to make a `Breadcrumb` variant which renders red `Crumb` components: -The base component would pipe the function into the child: +``` +const RedCrumb = styled(Crumb, props => ({ root: background: 'red' })); -```tsx -let { getCrumbStyles } = this.props; +render() { + return +``` -// ...and in the render function: +Additionally this "breadcrumb with red crumbs" scenario could be abstracted as its own component, by passing in the 3rd optional param to `styled`, which lets the caller provide new default prop values: - ``` +const RedBreadcrumb = styled(Breadcrumb, undefined, { crumbAs: RedCrumb }); -And finally, the composite component created by the `styles` wrapper would link default styling for the property: - -```tsx -export const Breadcrumb = styled( - BreadcrumbBase, - { - getStyles, - getCrumbStyles - } -) +render() { + return +} ``` ### ComponentName.test.tsx From 62cc53d57ea4bd4d01f452a3767f400d00d4cddf Mon Sep 17 00:00:00 2001 From: Montse Lozano Dieck Date: Wed, 7 Feb 2018 17:57:07 -0800 Subject: [PATCH 028/284] Callout: Fix positioning in RTL Auto Flipping (#3912) * Add hostid * Revert "Add hostid" This reverts commit d5a842d8ebc099fa4652d7abd7205bdfcf033b0a. * Fix rtl positioning bug for callout * Add change file * Fix syntax error * Change name of func * Change bundle max size to 42.81 * Update package.json --- .../malozano-CalloutRTL_2018-02-07-22-43.json | 11 ++++++++ .../Callout/CalloutContent.base.tsx | 22 +++++++++++++++- .../Callout/CalloutContent.styles.ts | 26 ++++--------------- .../__snapshots__/Callout.test.tsx.snap | 8 ++++-- scripts/package.json | 4 +-- 5 files changed, 45 insertions(+), 26 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json diff --git a/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json b/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json new file mode 100644 index 00000000000000..b5c8710c743fae --- /dev/null +++ b/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Callout: Move positioning to inline styling", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "malozano@microsoft.com" +} \ No newline at end of file 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 de0022878e0271..dc141308bf96db 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 @@ -13,7 +13,6 @@ import { IRectangle, assign, autobind, - css, elementContains, focusFirstChild, getWindow, @@ -33,6 +32,11 @@ import { classNamesFunction } from '../../Utilities'; const getClassNames = classNamesFunction(); const BORDER_WIDTH: number = 1; +const BEAK_ORIGIN_POSITION = { top: 0, left: 0 }; +// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style. +// To help ensure that edge will respect the offscreen style opacity +// filter needs to be added as an additional way to set opacity. +const OFF_SCREEN_STYLE = { opacity: 0, filter: 'opacity(0)' }; export interface ICalloutState { positions?: ICalloutPositionedInfo; @@ -164,6 +168,7 @@ export class CalloutContentBase extends BaseComponent
) } { beakVisible && (
) } @@ -258,6 +264,20 @@ export class CalloutContentBase extends BaseComponent this._updatePosition()); } + private _getBeakPosition(): React.CSSProperties { + let { positions } = this.state; + let beakPostionStyle: React.CSSProperties = { + ...(positions && positions.beakPosition ? positions.beakPosition.elementPosition : null), + }; + + if (!beakPostionStyle.top && !beakPostionStyle.bottom && !beakPostionStyle.left && !beakPostionStyle.right) { + beakPostionStyle.left = BEAK_ORIGIN_POSITION.left; + beakPostionStyle.top = BEAK_ORIGIN_POSITION.top; + } + + return beakPostionStyle; + } + private _updatePosition() { let { positions } = this.state; let hostElement: HTMLElement = this._hostElement; diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts index 327cf4dd38f6e5..c0019c4e59e513 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts @@ -19,8 +19,7 @@ const ANIMATIONS: { [key: number]: IRawStyle; } = { [RectangleEdge.right]: AnimationStyles.slideRightIn20, }; -function getBeakStylePosition(positions?: ICalloutPositionedInfo, - beakWidth?: number, +function getBeakStyle(beakWidth?: number, beakStyle?: string): IRawStyle { let beakStyleWidth = beakWidth; @@ -30,17 +29,10 @@ function getBeakStylePosition(positions?: ICalloutPositionedInfo, beakStyleWidth = 16; } - let beakReactStyle: IRawStyle = { - ...(positions && positions.beakPosition ? positions.beakPosition.elementPosition : null), + return { + height: beakStyleWidth, + width: beakStyleWidth }; - beakReactStyle.height = beakStyleWidth; - beakReactStyle.width = beakStyleWidth; - if (!beakReactStyle.top && !beakReactStyle.bottom && !beakReactStyle.left && !beakReactStyle.right) { - beakReactStyle.left = BEAK_ORIGIN_POSITION.left; - beakReactStyle.top = BEAK_ORIGIN_POSITION.top; - } - - return beakReactStyle; } export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => { @@ -84,14 +76,6 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl focusClear(), className, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge], - // Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style. - // To help ensure that edge will respect the offscreen style opacity - // filter needs to be added as an additional way to set opacity. - !positions && { - opacity: 0, - filter: 'opacity(0)', - }, - positions && { ...positions.elementPosition }, !!calloutWidth && { width: calloutWidth }, ], beak: [ @@ -104,7 +88,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl boxSizing: 'border-box', transform: 'rotate(45deg)' }, - getBeakStylePosition(positions, beakWidth, beakStyle), + getBeakStyle(beakWidth, beakStyle), backgroundColor && { backgroundColor: backgroundColor } diff --git a/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap index e0d53d5ed76393..3f49786bdf6d14 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap @@ -17,8 +17,6 @@ exports[`Callout renders Callout correctly 1`] = ` border-width: 1px; box-shadow: 0 0 5px 0px rgba(0,0,0,0.4); box-sizing: border-box; - filter: opacity(0); - opacity: 0; outline: transparent; position: absolute; } @@ -30,6 +28,12 @@ exports[`Callout renders Callout correctly 1`] = ` &::-moz-focus-inner { border: 0px; } + style={ + Object { + "filter": "opacity(0)", + "opacity": 0, + } + } tabIndex={-1} >
Date: Thu, 8 Feb 2018 02:29:26 +0000 Subject: [PATCH 029/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...llout-rtlpositionfix_2018-02-07-01-43.json | 11 ----------- .../malozano-CalloutRTL_2018-02-07-22-43.json | 11 ----------- packages/experiments/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 19 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 10 +++++++++- packages/office-ui-fabric-react/package.json | 2 +- 11 files changed, 35 insertions(+), 30 deletions(-) delete mode 100644 common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json delete mode 100644 common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index f124dd16adc765..cf3e38358c3a7b 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.48.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 082e7be1778099..0e3cfaff1ce88a 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 0858d09f23c0c0..19428dd1717222 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 8d66ea9c0e243a..ddafba0317992b 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 206e2a459e4eee..3bf21d94956124 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.47.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "typescript": "2.6.2", diff --git a/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json b/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json deleted file mode 100644 index 24fe2e974adc88..00000000000000 --- a/common/changes/office-ui-fabric-react/callout-rtlpositionfix_2018-02-07-01-43.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "joschect@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json b/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json deleted file mode 100644 index b5c8710c743fae..00000000000000 --- a/common/changes/office-ui-fabric-react/malozano-CalloutRTL_2018-02-07-22-43.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Callout: Move positioning to inline styling", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "malozano@microsoft.com" -} \ No newline at end of file diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 624e934b15f473..78a21a468313a6 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.48.0 <6.0.0", + "office-ui-fabric-react": ">=5.48.1 <6.0.0", "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 4d04e8d38173d6..0607e5c1534092 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.48.1", + "tag": "office-ui-fabric-react_v5.48.1", + "date": "Thu, 08 Feb 2018 02:29:26 GMT", + "comments": { + "patch": [ + { + "author": "Jon Schectman ", + "commit": "7533d0e07dbfda819c8761bce764b4bc4fabfcae", + "comment": "Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl" + }, + { + "author": "Montse Lozano Dieck ", + "commit": "62cc53d57ea4bd4d01f452a3767f400d00d4cddf", + "comment": "Callout: Move positioning to inline styling" + } + ] + } + }, { "version": "5.48.0", "tag": "office-ui-fabric-react_v5.48.0", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index a0a3bad52fb7ed..70bf218b085709 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log - office-ui-fabric-react -This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. +This log was last generated on Thu, 08 Feb 2018 02:29:26 GMT and should not be manually modified. + +## 5.48.1 +Thu, 08 Feb 2018 02:29:26 GMT + +### Patches + +- Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl +- Callout: Move positioning to inline styling ## 5.48.0 Wed, 07 Feb 2018 11:23:59 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index f9dd78e63915e0..8df0662dbd1966 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.48.0", + "version": "5.48.1", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", From 77a0be82fb6c440fa7ec6f4e80efed7d67f007c1 Mon Sep 17 00:00:00 2001 From: Kristian Halle Date: Thu, 8 Feb 2018 10:10:09 +0100 Subject: [PATCH 030/284] Initials (#3909) * Don't show initials for phone numbers * Change request files * Fixes --- .../initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../icons/initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../styling/initials_2018-02-07-13-49.json | 11 +++++++ .../utilities/initials_2018-02-07-13-49.json | 11 +++++++ .../initials_2018-02-07-13-49.json | 11 +++++++ .../src/components/Persona/Persona.test.tsx | 4 +-- .../examples/Persona.Initials.Example.tsx | 4 +++ packages/utilities/src/initials.test.ts | 32 +++++++++++++++++-- packages/utilities/src/initials.ts | 9 +++++- 14 files changed, 154 insertions(+), 5 deletions(-) create mode 100644 common/changes/@uifabric/example-app-base/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/experiments/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/fabric-website/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/file-type-icons/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/icons/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/jest-serializer-merge-styles/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/merge-styles/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/styling/initials_2018-02-07-13-49.json create mode 100644 common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json create mode 100644 common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json diff --git a/common/changes/@uifabric/example-app-base/initials_2018-02-07-13-49.json b/common/changes/@uifabric/example-app-base/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..55ac6310053df4 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/example-app-base", + "type": "none" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/initials_2018-02-07-13-49.json b/common/changes/@uifabric/experiments/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..da6fd82d9a0c3d --- /dev/null +++ b/common/changes/@uifabric/experiments/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/experiments", + "type": "none" + } + ], + "packageName": "@uifabric/experiments", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/initials_2018-02-07-13-49.json b/common/changes/@uifabric/fabric-website/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..449e1cc3620edc --- /dev/null +++ b/common/changes/@uifabric/fabric-website/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/fabric-website", + "type": "none" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/file-type-icons/initials_2018-02-07-13-49.json b/common/changes/@uifabric/file-type-icons/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..bc41d040120dac --- /dev/null +++ b/common/changes/@uifabric/file-type-icons/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/file-type-icons", + "type": "none" + } + ], + "packageName": "@uifabric/file-type-icons", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/icons/initials_2018-02-07-13-49.json b/common/changes/@uifabric/icons/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..4d68b785414294 --- /dev/null +++ b/common/changes/@uifabric/icons/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/icons", + "type": "none" + } + ], + "packageName": "@uifabric/icons", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/jest-serializer-merge-styles/initials_2018-02-07-13-49.json b/common/changes/@uifabric/jest-serializer-merge-styles/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..f308df63f7ee14 --- /dev/null +++ b/common/changes/@uifabric/jest-serializer-merge-styles/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/jest-serializer-merge-styles", + "type": "none" + } + ], + "packageName": "@uifabric/jest-serializer-merge-styles", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/initials_2018-02-07-13-49.json b/common/changes/@uifabric/merge-styles/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..ad82059ac36234 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/merge-styles", + "type": "none" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/initials_2018-02-07-13-49.json b/common/changes/@uifabric/styling/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..bd2b4f2e78b326 --- /dev/null +++ b/common/changes/@uifabric/styling/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/styling", + "type": "none" + } + ], + "packageName": "@uifabric/styling", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json b/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..e325d1cc0b533a --- /dev/null +++ b/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/utilities", + "comment": "Return empty initials for phone numbers", + "type": "patch" + } + ], + "packageName": "@uifabric/utilities", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json b/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json new file mode 100644 index 00000000000000..02066ef6c37975 --- /dev/null +++ b/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Return empty initials for phone numbers", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "khalle@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx index 180e8e2df2111e..0b2b42c6bcfb26 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx @@ -46,10 +46,10 @@ describe('Persona', () => { expect(result.text()).toEqual('DZ'); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); - expect(result.text()).toEqual('44'); + expect(result.text()).toEqual('45'); wrapper.unmount(); wrapper = mount(); diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx index cba8dc222a5eae..549d016b6869b4 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx @@ -29,6 +29,10 @@ export class PersonaInitialsExample extends React.Component { { ...examplePersona } primaryText='Annie Lindqvist' /> + { }); it('calculates an expected initials in LTR with numbers', () => { - let result = getInitials('4lex 4loo', false); - expect(result).toEqual('44'); + let result = getInitials('4lex 5loo', false); + expect(result).toEqual('45'); }); it('calculates an expected initials in LTR with parentheses', () => { @@ -99,4 +99,32 @@ describe('getInitials', () => { expect(result).toEqual(''); }); + it('calculates expected initials for phone numbers', () => { + let result = getInitials('12345678', false); + expect(result).toEqual(''); + + result = getInitials('+1 (555) 123-4567 ext.4567', false); + expect(result).toEqual(''); + + result = getInitials('+47 12 34 56 78 (X 5678)', false); + expect(result).toEqual(''); + + result = getInitials('1 Ext 2', false); + expect(result).toEqual(''); + + result = getInitials('James Ext 2', false); + expect(result).toEqual('J2'); + + result = getInitials('1x1', false); + expect(result).toEqual(''); + + result = getInitials('1y1', false); + expect(result).toEqual('1'); + + result = getInitials('1', false); + expect(result).toEqual('1'); + + result = getInitials('A 2', false); + expect(result).toEqual('A2'); + }); }); diff --git a/packages/utilities/src/initials.ts b/packages/utilities/src/initials.ts index f85a2704637ead..387495adf44829 100644 --- a/packages/utilities/src/initials.ts +++ b/packages/utilities/src/initials.ts @@ -5,6 +5,12 @@ */ const UNWANTED_CHARS_REGEX: RegExp = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g; +/** + * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed + * and number has been trimmed for whitespaces + */ +const PHONENUMBER_REGEX: RegExp = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i; + /** Regular expression matching one or more spaces. */ const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g; @@ -61,7 +67,8 @@ export function getInitials(displayName: string | undefined | null, isRtl: boole displayName = cleanupDisplayName(displayName); - if (UNSUPPORTED_TEXT_REGEX.test(displayName)) { + // For names containing CJK characters, and phone numbers, we don't display initials + if (UNSUPPORTED_TEXT_REGEX.test(displayName) || PHONENUMBER_REGEX.test(displayName)) { return ''; } From 2389b8dabd023f5ebea39d03e4f8d94572e673f7 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Thu, 8 Feb 2018 11:13:51 +0000 Subject: [PATCH 031/284] Applying package updates. --- apps/fabric-website/package.json | 2 +- .../utilities/initials_2018-02-07-13-49.json | 11 ----------- .../initials_2018-02-07-13-49.json | 11 ----------- packages/example-app-base/package.json | 2 +- packages/experiments/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 19 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 9 ++++++++- packages/office-ui-fabric-react/package.json | 4 ++-- packages/styling/package.json | 2 +- packages/utilities/CHANGELOG.json | 14 ++++++++++++++ packages/utilities/CHANGELOG.md | 9 ++++++++- packages/utilities/package.json | 2 +- 12 files changed, 56 insertions(+), 31 deletions(-) delete mode 100644 common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json delete mode 100644 common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index cf3e38358c3a7b..500373c55d3ee2 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.48.1 <6.0.0", + "office-ui-fabric-react": ">=5.48.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json b/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json deleted file mode 100644 index e325d1cc0b533a..00000000000000 --- a/common/changes/@uifabric/utilities/initials_2018-02-07-13-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Return empty initials for phone numbers", - "type": "patch" - } - ], - "packageName": "@uifabric/utilities", - "email": "khalle@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json b/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json deleted file mode 100644 index 02066ef6c37975..00000000000000 --- a/common/changes/office-ui-fabric-react/initials_2018-02-07-13-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Return empty initials for phone numbers", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "khalle@microsoft.com" -} \ No newline at end of file diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index 240c13e7d0e3bb..a4e33e8ba924db 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.10.1 <6.0.0", + "@uifabric/utilities": ">=5.10.2 <6.0.0", "highlight.js": "^9.12.0", "office-ui-fabric-react": ">=5.1.0 <6.0.0", "tslib": "^1.7.1" diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 78a21a468313a6..1113863c461482 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.48.1 <6.0.0", + "office-ui-fabric-react": ">=5.48.2 <6.0.0", "@uifabric/icons": ">=5.4.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 0607e5c1534092..7113dade45bdf7 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.48.2", + "tag": "office-ui-fabric-react_v5.48.2", + "date": "Thu, 08 Feb 2018 11:13:51 GMT", + "comments": { + "patch": [ + { + "author": "Kristian Halle ", + "commit": "77a0be82fb6c440fa7ec6f4e80efed7d67f007c1", + "comment": "Return empty initials for phone numbers" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`" + } + ] + } + }, { "version": "5.48.1", "tag": "office-ui-fabric-react_v5.48.1", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 70bf218b085709..366d7b27f252b1 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - office-ui-fabric-react -This log was last generated on Thu, 08 Feb 2018 02:29:26 GMT and should not be manually modified. +This log was last generated on Thu, 08 Feb 2018 11:13:51 GMT and should not be manually modified. + +## 5.48.2 +Thu, 08 Feb 2018 11:13:51 GMT + +### Patches + +- Return empty initials for phone numbers ## 5.48.1 Thu, 08 Feb 2018 02:29:26 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 8df0662dbd1966..2cb9066ca5d693 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.48.1", + "version": "5.48.2", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -51,7 +51,7 @@ "@uifabric/icons": ">=5.4.2 <6.0.0", "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "@uifabric/styling": ">=5.17.0 <6.0.0", - "@uifabric/utilities": ">=5.10.1 <6.0.0", + "@uifabric/utilities": ">=5.10.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/styling/package.json b/packages/styling/package.json index 5c53f0ee320712..cc8e6438a55874 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/utilities": ">=5.10.1 <6.0.0", + "@uifabric/utilities": ">=5.10.2 <6.0.0", "@uifabric/merge-styles": ">=5.11.2 <6.0.0", "tslib": "^1.7.1" } diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json index a9c8f55adaa129..51ed09a3a2b628 100644 --- a/packages/utilities/CHANGELOG.json +++ b/packages/utilities/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/utilities", "entries": [ + { + "version": "5.10.2", + "tag": "@uifabric/utilities_v5.10.2", + "date": "Thu, 08 Feb 2018 11:13:51 GMT", + "comments": { + "patch": [ + { + "author": "Kristian Halle ", + "commit": "77a0be82fb6c440fa7ec6f4e80efed7d67f007c1", + "comment": "Return empty initials for phone numbers" + } + ] + } + }, { "version": "5.10.1", "tag": "@uifabric/utilities_v5.10.1", diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index c4993a1d080848..17c3172de70e65 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/utilities -This log was last generated on Wed, 07 Feb 2018 11:23:59 GMT and should not be manually modified. +This log was last generated on Thu, 08 Feb 2018 11:13:51 GMT and should not be manually modified. + +## 5.10.2 +Thu, 08 Feb 2018 11:13:51 GMT + +### Patches + +- Return empty initials for phone numbers ## 5.10.1 Wed, 07 Feb 2018 11:23:59 GMT diff --git a/packages/utilities/package.json b/packages/utilities/package.json index 992be6b5372520..5d36a0cab3b7b1 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/utilities", - "version": "5.10.1", + "version": "5.10.2", "description": "Office UI Fabric utilities for building React components.", "main": "lib/index.js", "typings": "lib/index.d.ts", From 1e22ceeef52c46b7f7bfda9b2d1015664105f6ff Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 8 Feb 2018 10:32:21 -0800 Subject: [PATCH 032/284] Rating: Rename RatingBase.tsx to Rating.base.tsx to match convention (#3921) * Rename RatingBase.tsx to Rating.base.tsx to match convention * Add change file --- .../miwhea-rename-rating-base_2018-02-08-16-38.json | 11 +++++++++++ .../Rating/{RatingBase.tsx => Rating.base.tsx} | 0 .../src/components/Rating/Rating.test.tsx | 2 +- .../src/components/Rating/Rating.tsx | 2 +- 4 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/miwhea-rename-rating-base_2018-02-08-16-38.json rename packages/office-ui-fabric-react/src/components/Rating/{RatingBase.tsx => Rating.base.tsx} (100%) diff --git a/common/changes/office-ui-fabric-react/miwhea-rename-rating-base_2018-02-08-16-38.json b/common/changes/office-ui-fabric-react/miwhea-rename-rating-base_2018-02-08-16-38.json new file mode 100644 index 00000000000000..b6ce41b184355b --- /dev/null +++ b/common/changes/office-ui-fabric-react/miwhea-rename-rating-base_2018-02-08-16-38.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Rating: Renamed RatingBase.tsx to Rating.base.tsx to match convention", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mike@mikewheaton.ca" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Rating/RatingBase.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx similarity index 100% rename from packages/office-ui-fabric-react/src/components/Rating/RatingBase.tsx rename to packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx index 045a730bb1f0a5..d98139e79d00b6 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx @@ -7,7 +7,7 @@ import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; import { Rating } from './Rating'; -import { RatingBase } from './RatingBase'; +import { RatingBase } from './Rating.base'; import { getStyles } from './Rating.styles'; describe('Rating', () => { diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx index 373e57e06ef683..3699b845ccf1d1 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx @@ -3,7 +3,7 @@ import { } from '../../Utilities'; import { IRatingProps } from './Rating.types'; import { getStyles } from './Rating.styles'; -import { RatingBase } from './RatingBase'; +import { RatingBase } from './Rating.base'; export const Rating = styled( RatingBase, From d716d81c844e366e37d1fdf023c527541a7b6b57 Mon Sep 17 00:00:00 2001 From: Kushal Yarlagadda Date: Thu, 8 Feb 2018 15:16:17 -0800 Subject: [PATCH 033/284] Close contextual menu on Alt key. (#3923) * ContextualMenus and Dropdowns now close on Alt keypresses. * Revert "ContextualMenus and Dropdowns now close on Alt keypresses." This reverts commit 0916b5f206379d14d961c0485495cdff90bfe718. * Allowing for contextual and menus to be closed on Alt keys. Works for any number of submenus. Closes the last opened sub menu but does not close all menus on Alt key. * Change file --- .../MenuKeyboarding_2018-02-08-02-16.json | 11 +++++++++++ .../components/ContextualMenu/ContextualMenu.tsx | 4 +++- .../src/components/Dropdown/Dropdown.tsx | 13 +++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/MenuKeyboarding_2018-02-08-02-16.json diff --git a/common/changes/office-ui-fabric-react/MenuKeyboarding_2018-02-08-02-16.json b/common/changes/office-ui-fabric-react/MenuKeyboarding_2018-02-08-02-16.json new file mode 100644 index 00000000000000..47ac1877e140fd --- /dev/null +++ b/common/changes/office-ui-fabric-react/MenuKeyboarding_2018-02-08-02-16.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Allowing for contextual and menus to be closed on Alt keys", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "kushaly@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index 75f503bb0b426d..a1457b818c0946 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -663,6 +663,8 @@ export class ContextualMenu extends BaseComponent) { - if (ev.which === KeyCodes.escape) { + if (ev.which === KeyCodes.escape || ev.altKey || ev.metaKey) { this._isFocusingPreviousElement = true; ev.preventDefault(); ev.stopPropagation(); diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx index a2d11867564c1e..097988c063f559 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx @@ -748,6 +748,13 @@ export class Dropdown extends BaseComponent Date: Thu, 8 Feb 2018 15:42:33 -0800 Subject: [PATCH 034/284] Update CONTRIBUTING.md --- ghdocs/CONTRIBUTING.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/ghdocs/CONTRIBUTING.md b/ghdocs/CONTRIBUTING.md index a2ab1d7bfd15eb..212f1c6369634d 100644 --- a/ghdocs/CONTRIBUTING.md +++ b/ghdocs/CONTRIBUTING.md @@ -2,8 +2,6 @@ Office UI Fabric React is an evolving snapshot of the Office 365 Design Language's components, built with [React](https://facebook.github.io/react/). -Right now, the project is in a **pre-v1** state, so we're mainly driving torwards the goals outlined in the [roadmap](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/ROADMAP.md). With this in mind, feel free to file bugs but new components or additional features will probably not be considered to be executed on until after the v1 state is reached. - ### Contribution license agreement For pull requests affecting fewer than 15 lines of code, you will need to sign a [Contribution License Agreement (CLA)](https://cla.microsoft.com/) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document. From c761919891df8df48a02c4cbee2bc18ac8635d55 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Thu, 8 Feb 2018 21:34:33 -0800 Subject: [PATCH 035/284] ChoiceGroup: More flexible field sizing, especially for images (#3930) * More flexible sizing, default h w, and large image size class * Bumped up padding on large format * Added change file * jsx alignment --- .../src/stories/ChoiceGroup.stories.tsx | 26 +++++++++++++++-- ...egroup-size-refactor_2018-02-08-22-52.json | 11 ++++++++ .../components/ChoiceGroup/ChoiceGroup.scss | 28 +++++++++++-------- .../components/ChoiceGroup/ChoiceGroup.tsx | 23 ++++++++++----- .../ChoiceGroup/ChoiceGroup.types.ts | 1 + 5 files changed, 67 insertions(+), 22 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/choicegroup-size-refactor_2018-02-08-22-52.json diff --git a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx index b3facd8fe5b42e..dc4609f217909e 100644 --- a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx +++ b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx @@ -77,7 +77,7 @@ storiesOf('ChoiceGroup', module) ] } /> )) - .add('With images', () => ( + .add('With default size images', () => ( + )) + .add('With large size images', () => ( + 71 || imageSize.height > 71; return (