From a142df5212cfb60bbcc59addb76887ce35f680fe Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 27 Jul 2016 14:09:02 -0700 Subject: [PATCH 01/15] Fixing list group header css --- src/components/DetailsList/GroupHeader.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DetailsList/GroupHeader.scss b/src/components/DetailsList/GroupHeader.scss index 1fee24770ab0ba..c737b61386433b 100644 --- a/src/components/DetailsList/GroupHeader.scss +++ b/src/components/DetailsList/GroupHeader.scss @@ -54,6 +54,7 @@ .ms-GroupHeader-expand { width: 36px; height: 40px; + color: $ms-color-neutralSecondary; .ms-Icon { transform: rotate(-180deg); From a766523a30d8816a27e48578ccfa008e2633e6ee Mon Sep 17 00:00:00 2001 From: Yimin Wu Date: Thu, 28 Jul 2016 12:03:37 -0700 Subject: [PATCH 02/15] Fix infinity loop when this.props.getItemCountForPage return 0 as item count per page. (#22) Fix infinity loop when this.props.getItemCountForPage return 0 --- src/components/List/List.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 8f9bb566636943..56bcf09e689c1a 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -569,7 +569,9 @@ export class List extends BaseComponent { } private _getItemCountForPage(itemIndex: number, visibileRect: ClientRect): number { - return this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE; + let itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE; + + return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE; } private _createPage(pageKey: string, items: any[], startIndex?: number, count?: number, style?: any): IPage { From 16b8dba1f522a59fe98da10f77fd7b2bcf9f6a4f Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Thu, 28 Jul 2016 12:44:45 -0700 Subject: [PATCH 03/15] Dubunin/breadcrumb issues (#12) * #191731: updated hover state color for overflow button * #191719: added override styles for breadcrumb focus rect * #191719: code formatting - missing space * #191723: per design - removed negative margin-right from overflow breadcrumb * #191723: code cleanup * #191723: updated to use localized margins * 191731: removed overrides that are no longer necessary. Updated to use focus-border. --- src/components/Breadcrumb/Breadcrumb.scss | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 0f31f2b6c94537..7dd193f79d97a2 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -47,15 +47,13 @@ } .ms-Breadcrumb-overflow { - display: none; + display: inline-block; position: relative; - margin-right: -4px; .ms-Breadcrumb-overflowButton { font-size: $ms-font-size-s; display: inline-block; color:$ms-color-themePrimary; - margin-right: -4px; padding: 12px 8px 3px 8px; cursor: pointer; } @@ -106,6 +104,7 @@ &:hover { background-color: $ms-color-neutralLighter; + color: $ms-color-themeDark; cursor: pointer; } @@ -121,6 +120,7 @@ } .ms-Breadcrumb-itemLink { + @include focus-border(); @include ms-font-xl(); display: inline-block; padding: 0 4px; @@ -130,7 +130,6 @@ overflow: hidden; } - @media screen and (max-width: $ms-screen-md-max) { .ms-Breadcrumb { margin: 10px 0; @@ -170,14 +169,3 @@ } } } - -// TODO: Overrides that need to be removed. - -.ms-Breadcrumb-overflow { - display: inline-block; -} - -.ms-Breadcrumb-overflowButton { - line-height: 12px; - margin-right: 0px; -} \ No newline at end of file From c9fb26cf9c88beedba4816201b22821b09595e9e Mon Sep 17 00:00:00 2001 From: Lambert W Date: Thu, 28 Jul 2016 14:10:35 -0700 Subject: [PATCH 04/15] Added null check to root search for withViewport Added null check to root search for withViewport --- src/utilities/decorators/withViewport.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/utilities/decorators/withViewport.tsx b/src/utilities/decorators/withViewport.tsx index fb87156158106e..8904a6c107da05 100644 --- a/src/utilities/decorators/withViewport.tsx +++ b/src/utilities/decorators/withViewport.tsx @@ -91,6 +91,9 @@ export function withViewport(ComposedComponent: any): any { (computedOverflow !== 'auto') && (computedOverflow !== 'scroll') ) { + if (rootElement.parentElement === null) { + break; + } rootElement = rootElement.parentElement; computedOverflow = getComputedStyle(rootElement)['overflow-y']; } From 5dbad93075892b4be447fa3d49c4e6068ba9f634 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 28 Jul 2016 15:06:49 -0700 Subject: [PATCH 05/15] DetailsList now resets columns correctly when they change based on new items passed in (#26) * Adding repo example. * Fixing the filter bug * Adding 2 more reviewers. * Adding travis file. * rename temporarily. * Renaming back. * Rename. * Renaming. --- .pullapprove.yml | 2 ++ .travis.yml | 14 ++++++++ src/components/DetailsList/DetailsList.tsx | 4 +-- src/demo/components/{app => App}/App.scss | 0 src/demo/components/{app => App}/App.tsx | 0 src/demo/components/{app => App}/AppState.ts | 0 .../examples/DetailsList.Basic.Example.tsx | 33 +++++++++++++++---- ...ple.tsx => SearchBox.FullSize.Example.tsx} | 0 8 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 .travis.yml rename src/demo/components/{app => App}/App.scss (100%) rename src/demo/components/{app => App}/App.tsx (100%) rename src/demo/components/{app => App}/AppState.ts (100%) rename src/demo/pages/SearchBoxPage/examples/{SearchBox.Fullsize.Example.tsx => SearchBox.FullSize.Example.tsx} (100%) diff --git a/.pullapprove.yml b/.pullapprove.yml index dfc81cba19d198..f453aaab3c5f26 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -11,5 +11,7 @@ reviewers: - mikewheaton - dzearing - cliffkoh + - aditima + - yiminwu name: pullapprove required: 1 diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000000000..c7e68442a0a2b8 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,14 @@ +language: node_js +node_js: +- '4.2' +before_script: +- npm install -g gulp +script: gulp +deploy: + provider: npm + email: dzearing@microsoft.com + api_key: + secure: kLwlKSvDBoGsYP0p+64JnW5kmSpZfSmt2YxKKwWFcThlsiftbZtUILWFVpPd7A5yymsYuOONZTXppaW00OWaH1Bqs6yVHOn3kVQzE7VK/FtVwGZnqFfF0ea0pYYfto3OIFnyZ86vZ0M8u2A+3FGqjGYT1y3RDbG5GqhURBNd+KBhHrMS+pSaGDgEjskslLeQ+QtQ1/t17j0ZQZeYpxl+qFKislR1djeF0pkOjaoJ8wAUB77E0RhVyKP4cOyvtiF9E8nmnaurNYuabZqFMzOg0PgzMhh6xWv10aGF7jNzgojzCix/grCJR1gdfaE6epPGkrufK1nFjCVb60Z+jHZmuhXrW80Qa9AsMbNkXLlm9g6OLm63Ub2xqNQ5338NteGygWj8FRYe7ZngQ/vAY7SK44oA6+QRJAcpV6ieUFeIN8oEoZ42TJjUuKa6xaRVxuRQs2yobB3GzE4QioWLtqlDo+jbkzc0uFUpQHfErH5pHa7+qHDawiY9sO41lKvds6KfD3PXqHJxdokQh5nRB28k0eN+rFiSyvimDmerqBeG0U2oVJuYGVwGZSMKkOXGoZjZaCOFkPaZcS+HQZ+iDYpqEoB1jF1iYgkknZQLDlprWywjXEy/u2C2Bkd1K31aFCwYxrxkgGquii1ugUFVrjCpNLbeeoKALx5JapDfyAUVF+U= + on: + tags: true + repo: OfficeDev/office-ui-fabric-react diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 501d8d5b115691..f94fafafa5f690 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -391,7 +391,7 @@ export class DetailsList extends React.Component { - _items = _items || createListItems(500); +export class DetailsListBasicExample extends React.Component { + constructor() { + super(); + + _items = _items || createListItems(500); + this.state = { filterText: '' }; + } + + public render() { + let { filterText } = this.state; + let items = this.state.filterText ? _items.filter(i => i.name.toLowerCase().indexOf(filterText) > -1) : _items; + + return ( +
+ this.setState({ filterText: text }) } + /> + +
+ ); + } + +} - return ( - - ); -}; diff --git a/src/demo/pages/SearchBoxPage/examples/SearchBox.Fullsize.Example.tsx b/src/demo/pages/SearchBoxPage/examples/SearchBox.FullSize.Example.tsx similarity index 100% rename from src/demo/pages/SearchBoxPage/examples/SearchBox.Fullsize.Example.tsx rename to src/demo/pages/SearchBoxPage/examples/SearchBox.FullSize.Example.tsx From 42873cc69587b1a21dce52f300c5b62e5fdd02a3 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 28 Jul 2016 15:34:24 -0700 Subject: [PATCH 06/15] Applying an undo of the recent Nav changes until we sort out the correct fix (#27) * Applying an undo of the recent Nav changes until we sort out the correct fix. * Adding anton as a PR approver. --- .pullapprove.yml | 1 + src/components/Nav/Nav.Props.ts | 10 --- src/components/Nav/Nav.scss | 80 +++++-------------- src/components/Nav/Nav.tsx | 64 +++++---------- .../NavPage/examples/Nav.Basic.Example.tsx | 11 +-- 5 files changed, 43 insertions(+), 123 deletions(-) diff --git a/.pullapprove.yml b/.pullapprove.yml index f453aaab3c5f26..436823b4b391bc 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -13,5 +13,6 @@ reviewers: - cliffkoh - aditima - yiminwu + - antonlabunets name: pullapprove required: 1 diff --git a/src/components/Nav/Nav.Props.ts b/src/components/Nav/Nav.Props.ts index 7da3d365c8d152..33febb0c728c10 100644 --- a/src/components/Nav/Nav.Props.ts +++ b/src/components/Nav/Nav.Props.ts @@ -21,16 +21,6 @@ export interface INavProps { * Indicates whether the navigation component renders on top of other content in the UI */ isOnTop?: boolean; - - /** - * (Optional) The alt text for the expanded state - **/ - expandedStateText?: string; - - /** - * (Optional) The alt text for the collapsed state text - **/ - collapsedStateText?: string; } export interface INavLinkGroup { diff --git a/src/components/Nav/Nav.scss b/src/components/Nav/Nav.scss index 4a5305615959fa..f97675faa021fe 100644 --- a/src/components/Nav/Nav.scss +++ b/src/components/Nav/Nav.scss @@ -39,52 +39,25 @@ transition: transform .1s linear; } -.ms-Nav-links { - display: block; - position: relative; - - .ms-Nav-chevronButton.ms-Nav-chevronButton--link { - display: block; - width: 40px; - height: 40px; - position: absolute; - top: 0; - @include left(0); - z-index: 1; - padding: 0; - margin: 0; - - .ms-Nav-chevron { - position: relative; - } - - &:hover { - background: transparent; - color: $ms-color-themePrimary; - } - } - - &.is-expanded { - .ms-Nav-chevron { - transform: rotate(-180deg); - } - } +.ms-Nav-IconLink { + @include margin-right(4px); } -.ms-Nav-chevronButton { +.ms-Nav-groupButton { display: block; + width: 100%; + height: 40px; + font-family: $ms-font-family-regular; font-size: $ms-font-size-s; @include text-align(left); line-height: 40px; margin: 5px 0; - padding-top: 0px; - @include padding-right(40px); - padding-bottom: 0px; - @include padding-left(40px); + padding: 0 40px; background: none; border: none; + border-bottom: 1px solid $dividerColor; text-transform: uppercase; cursor: pointer; @@ -99,15 +72,9 @@ color: $unselectedHoverForegroundColor; background: $unselectedHoverBackgroundColor; } - - &.ms-Nav-chevronButton--group { - width: 100%; - height: 40px; - border-bottom: 1px solid $dividerColor; - } } -.ms-Nav-chevron.ms-Icon { +.ms-Nav-groupChevron.ms-Icon { position: absolute; @include left(15px); height: 40px; @@ -116,25 +83,22 @@ transition: transform .1s linear; } -.ms-Nav-group.is-expanded .ms-Nav-chevronButton--group .ms-Nav-chevron { +.ms-Nav-group.is-expanded .ms-Nav-groupChevron { transform: rotate(-180deg); } -.ms-Nav-linkText { - vertical-align: middle; -} - .ms-Nav-link { display: block; position: relative; - padding-top: 10px; - @include padding-right(10px); - padding-bottom: 10px; - @include padding-left(40px); + height: 40px; + line-height: 40px; + text-decoration: none; + padding: 0 40px; cursor: pointer; - overflow: hidden; - word-wrap: break-word; + text-overflow: ellipsis; text-decoration: none; + white-space: nowrap; + overflow-x: hidden; color: $unselectedForegroundColor; background: $unselectedBackgroundColor; @@ -160,17 +124,13 @@ content: ''; position: absolute; top: 0; - @include right(0); + right: 0; bottom: 0; - @include left(0); + left: 0; } } } -.ms-Nav-chevronButton, -.ms-Nav-chevronButton--group, -.ms-Nav-chevronButton--link, -.ms-Nav-link { +.ms-Nav-groupButton, .ms-Nav-link { @include focus-border(); } - diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx index a30931d8a69de1..2941e036d999bd 100644 --- a/src/components/Nav/Nav.tsx +++ b/src/components/Nav/Nav.tsx @@ -43,49 +43,31 @@ export class Nav extends React.Component { ); } - private _renderAnchorLink(link: INavLink): React.ReactElement<{}> { - return ( - { this.props.onRenderLink(link) } - ); - } - - private _renderCompositeLink(link: INavLink, linkIndex: number): React.ReactElement<{}> { - return ( -
- - { this._renderAnchorLink(link) } -
- ); - } - - private _renderLink(link: INavLink, linkIndex: number, level: number): React.ReactElement<{}> { + private _renderLink(link: INavLink, linkIndex: number): React.ReactElement<{}> { return (
  • - {(level === 0 && link.links && link.links.length > 0 ? - this._renderCompositeLink(link, linkIndex) : this._renderAnchorLink(link) - )} - { (link.isExpanded ? this._renderLinks(link.links, ++level) : null) } -
    • + + { (link.iconClassName ? + + : '') } + { this.props.onRenderLink(link)} + { this._renderLinks(link.links) } + ); } - private _renderLinks(links: INavLink[], level: number): React.ReactElement<{}> { + private _renderLinks(links: INavLink[]): React.ReactElement<{}> { if (!links || !links.length) { return null; } const linkElements: React.ReactElement<{}>[] = links.map( - (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex, level)); + (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex)); return (
      @@ -98,19 +80,19 @@ export class Nav extends React.Component { const isGroupExpanded: boolean = this.state.isGroupExpanded[groupIndex] !== false; return ( -
      +
      { (group.name ? : null) }
      - { this._renderLinks(group.links, 0) } + { this._renderLinks(group.links) }
      ); @@ -125,14 +107,6 @@ export class Nav extends React.Component { ev.preventDefault(); ev.stopPropagation(); } - - private _onLinkExpandClicked(link: INavLink, ev: React.MouseEvent): void { - link.isExpanded = !link.isExpanded; - this.forceUpdate(); - - ev.preventDefault(); - ev.stopPropagation(); - } } // A tag used for resolving links. diff --git a/src/demo/pages/NavPage/examples/Nav.Basic.Example.tsx b/src/demo/pages/NavPage/examples/Nav.Basic.Example.tsx index 294933e5eb7923..46d2059bf4dc18 100644 --- a/src/demo/pages/NavPage/examples/Nav.Basic.Example.tsx +++ b/src/demo/pages/NavPage/examples/Nav.Basic.Example.tsx @@ -2,18 +2,13 @@ import * as React from 'react'; import { Nav } from '../../../../index'; -import './Nav.Basic.Example.scss'; export class NavBasicExample extends React.Component { public render() { return ( -
      -
      +
      @@ -373,7 +386,12 @@ export class DetailsList extends React.Component { let level = group ? group.level : 0; return ( -
      - onRenderCell(level, item, itemIndex) } - ref={ 'list' } - renderCount={ Math.min(count, renderCount) } - startIndex={ startIndex } - { ...listProps } - /> -
      + onRenderCell(level, item, itemIndex) } + ref={ 'list' } + renderCount={ Math.min(count, renderCount) } + startIndex={ startIndex } + { ...listProps } + /> ); } From 2dad4e36083cf87db21526ad0844dd24b712e6d7 Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Fri, 29 Jul 2016 16:11:42 -0700 Subject: [PATCH 09/15] #196739: updated icon button styles per design specs (#13) * #196743: removed beakWidth and class settings. Use defaults * TaskID 196744: updated default gapSpace to be 16 - removed gapSpace settings in the examples as they can use the default. * #196739: updated icon button styles per design specs * Fixing list group header css * Bringing over the latest updates from separat VSO repo. * Replacing tabs with spaces. * Adding example and bestpractices. * Removing examples from npm publishing. (#19) * 196739: code cleanup and contrast styles * #196739: updated icon button styles per design specs * 196739: code cleanup and contrast styles --- src/components/Button/Button.scss | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 9cc71569195ba0..149806a6c9f219 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -332,25 +332,47 @@ // TODO: Overrides that need to be removed. .ms-Button--icon { + @include focus-border(0px); background-color: transparent; + color: $ms-color-neutralSecondary; padding: 0; min-width: auto; height: auto; border: 0; - &:hover { + &:hover, + &:active { background-color: transparent; border-color: transparent; outline-color: transparent; + color: $ms-color-neutralPrimary; } &:focus { background-color: transparent; } + .ms-Icon { + font-size: 16px; + padding: 8px; + } + .ms-Button-icon { display: inline; } + + &.is-disabled, &:disabled { + color: $ms-color-neutralTertiaryAlt; + background-color: transparent; + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-yellowLight; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-blueMid; + } } // this is added because we have an anchor styled like a button and there is no From 6aa4bf067d5d6c6c7c7091e56a80ac2532bef32c Mon Sep 17 00:00:00 2001 From: David Zearing Date: Fri, 29 Jul 2016 17:09:15 -0700 Subject: [PATCH 10/15] Minor fix for viewport decorator to avoid rendering content in 0 space. (#29) * Applying an undo of the recent Nav changes until we sort out the correct fix. * Adding anton as a PR approver. * Minor tweak to viewport decorator to not render content in 0 width/height cases and also to avoid nullrefing in this situation when forceUpdate is called. * Updating details row fields to cache less to ensure forceUpdates work correctly. * Fixing the build to default to production. --- .travis.yml | 2 +- src/components/DetailsList/DetailsList.tsx | 8 +++- .../DetailsList/DetailsRowFields.tsx | 5 --- src/utilities/decorators/withViewport.tsx | 39 ++++++++++++------- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/.travis.yml b/.travis.yml index c7e68442a0a2b8..b8208214c949e3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,7 @@ node_js: - '4.2' before_script: - npm install -g gulp -script: gulp +script: gulp --production deploy: provider: npm email: dzearing@microsoft.com diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 7bb0159cea7481..c60e249dac4485 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -122,7 +122,8 @@ export class DetailsList extends React.Component(ComposedComponent: any): any { public render() { let { viewport } = this.state; + let isViewportVisible = viewport.width > 0 && viewport.height > 0; return (
      - { this.state.viewport.height > 0 && ( - - )} + { isViewportVisible && ( + + ) }
      ); } public forceUpdate() { - this.refs.component.forceUpdate(); + this._updateViewport(true); } private _onAsyncResize() { this._updateViewport(); } - private _updateViewport() { + private _updateViewport(withForceUpdate?: boolean) { + let { viewport } = this.state; let viewportElement = (this.refs as any).root; let scrollElement = this._findScrollableElement(viewportElement); - let clientRect = viewportElement.getBoundingClientRect(); let scrollRect = scrollElement.getBoundingClientRect(); - - this.setState({ - viewport: { - width: clientRect.width, - height: scrollRect.height - } - }); + let updateComponent = () => { + if (withForceUpdate && this.refs.component) { + this.refs.component.forceUpdate(); + } + }; + let isSizeChanged = ( + clientRect.width !== viewport.width || + scrollRect.height !== viewport.height); + + if (isSizeChanged) { + this.setState({ + viewport: { + width: clientRect.width, + height: scrollRect.height + } + }, updateComponent); + } else { + updateComponent(); + } } private _findScrollableElement(rootElement: HTMLElement) { From 760c4b8c6c4820c84423c30d7cb55e9283fec177 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Fri, 29 Jul 2016 17:24:42 -0700 Subject: [PATCH 11/15] v0.36.1 (#33) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c9270171af5829..8799b4be1ab113 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.36.0", + "version": "0.36.1", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", From 0985fd1a21add169d4e0e843fe323d99ea737449 Mon Sep 17 00:00:00 2001 From: Cliff Koh Date: Fri, 29 Jul 2016 18:21:51 -0700 Subject: [PATCH 12/15] 0.36.2 - Fix errant imports (#34) * Fix errant imports * Bump package.json as well --- package.json | 2 +- src/components/DetailsList/DetailsList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 8799b4be1ab113..6711586c79c717 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.36.1", + "version": "0.36.2", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index c60e249dac4485..54c980f5b4c0a0 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -11,8 +11,8 @@ import { import { DetailsHeader } from '../DetailsList/DetailsHeader'; import { DetailsRow } from '../DetailsList/DetailsRow'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; -import { GroupedList } from '../GroupedList'; -import { List } from '../List'; +import { GroupedList } from '../../GroupedList'; +import { List } from '../../List'; import { withViewport } from '../../utilities/decorators/withViewport'; import { assign } from '../../utilities/object'; import { css } from '../../utilities/css'; From 9450fab69fddad04f22d43ec817571b2de3147f2 Mon Sep 17 00:00:00 2001 From: Lambert W Date: Mon, 1 Aug 2016 10:21:01 -0700 Subject: [PATCH 13/15] Fixed detailsList onRowDidMount callback (#37) --- src/components/DetailsList/DetailsList.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 54c980f5b4c0a0..3a3664d262d767 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -278,8 +278,6 @@ export class DetailsList extends React.Component Date: Mon, 1 Aug 2016 12:51:48 -0700 Subject: [PATCH 14/15] Updating icons to MDL2 --- src/components/ChoiceGroup/ChoiceGroup.tsx | 2 +- src/components/CommandBar/CommandBar.scss | 2 +- src/components/CommandBar/CommandBar.tsx | 8 ++--- .../ContextualMenu/ContextualMenu.tsx | 4 +-- src/components/DatePicker/DatePicker.tsx | 2 +- src/components/DatePicker/DatePickerDay.tsx | 4 +-- src/components/DatePicker/DatePickerMonth.tsx | 4 +-- src/components/DetailsList/DetailsHeader.tsx | 10 +++--- src/components/Dialog/Dialog.scss | 2 +- src/components/Dialog/Dialog.tsx | 2 +- .../DocumentCard/DocumentCardActions.tsx | 2 +- src/components/Dropdown/Dropdown.tsx | 2 +- src/components/MessageBar/MessageBar.scss | 2 +- src/components/MessageBar/MessageBar.tsx | 15 ++++---- src/components/Nav/Nav.tsx | 2 +- src/components/Panel/Panel.tsx | 2 +- src/components/PeoplePicker/PeoplePicker.tsx | 10 +++--- src/components/SearchBox/SearchBox.tsx | 4 +-- src/demo/components/App/AppState.ts | 4 +-- src/demo/components/Header/Header.tsx | 6 ++-- .../examples/data-nonFocusable.ts | 12 +++---- .../pages/CommandBarPage/examples/data.ts | 36 +++++++++---------- 22 files changed, 69 insertions(+), 68 deletions(-) diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx index 455fa20f468031..01d0127e96b8ea 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -119,7 +119,7 @@ export class ChoiceGroup extends React.Component - + { option.text } : { option.text } diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index 5ef1a41f855082..7cd487c5c7805c 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -193,7 +193,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi } } - .ms-Icon--search { + .ms-Icon--Search { @include margin-left(2px); margin-top: 12px; vertical-align: top; diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index c16caca5b174ff..459ed886933520 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -89,10 +89,10 @@ export class CommandBar extends React.Component
      - +
      - +
      ); @@ -108,7 +108,7 @@ export class CommandBar extends React.Component ] : []) } @@ -153,7 +153,7 @@ export class CommandBar extends React.Component } { (!!item.name) && { item.name } } { (item.items && item.items.length) ? ( - + ) : ( null ) } ; } else { diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 619f3490c26756..635d5b8b96a00b 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -256,7 +256,7 @@ export class ContextualMenu extends React.Component ) : (null) } @@ -265,7 +265,7 @@ export class ContextualMenu extends React.Component{ item.name } {(item.items && item.items.length) ? ( - + ) : (null)} ); diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index 8b735fe34b8405..4bee707dbe0c3a 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -125,7 +125,7 @@ export class DatePicker extends React.Component - + - +
      diff --git a/src/components/DatePicker/DatePickerMonth.tsx b/src/components/DatePicker/DatePickerMonth.tsx index 76198f0ab6a62b..4a09fe7e778483 100644 --- a/src/components/DatePicker/DatePickerMonth.tsx +++ b/src/components/DatePicker/DatePickerMonth.tsx @@ -41,14 +41,14 @@ export class DatePickerMonth extends React.Component onClick={ this._onSelectPrevYear } onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevYear) } tabIndex={ 0 }> - + - +
      { navigatedDate.getFullYear() }
      diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx index 509c3ce4edcc9f..151dc3a30ca0be 100644 --- a/src/components/DetailsList/DetailsHeader.tsx +++ b/src/components/DetailsList/DetailsHeader.tsx @@ -119,7 +119,7 @@ export class DetailsHeader extends React.Component 0 ? ( diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 0ef9c04940370b..d76c9bb46c238f 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -84,7 +84,7 @@ top: 12px; z-index: $ms-zIndex-front; - .ms-Icon.ms-Icon--x { + .ms-Icon.ms-Icon--Cancel { color: $ms-color-neutralSecondary; font-size: 16px; } diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 923e0f1713c502..d8f6ddca9edb15 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -75,7 +75,7 @@ export class Dialog extends React.Component {

      { title }

      diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx index 7204affcb9be4c..1d31c756215aed 100644 --- a/src/components/DocumentCard/DocumentCardActions.tsx +++ b/src/components/DocumentCard/DocumentCardActions.tsx @@ -23,7 +23,7 @@ export class DocumentCardActions extends React.Component - + { views }
      ) } diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 8e785ed30b0617..fdf8f7f4c5a144 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -100,7 +100,7 @@ export class Dropdown extends React.Component { aria-activedescendant={ selectedIndex >= 0 ? (id + '-list' + selectedIndex) : (id + '-list') } aria-controls={ id + '-list' } > - + { selectedOption ? selectedOption.text : '' }
        this._optionList = c } id={ id + '-list' } diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss index c682fa5685f5eb..7ae6b85b55de50 100644 --- a/src/components/MessageBar/MessageBar.scss +++ b/src/components/MessageBar/MessageBar.scss @@ -205,6 +205,6 @@ $MessageBar-padding: 8px; } // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit. -.ms-MessageBar.ms-MessageBar--remove .ms-Icon--x { +.ms-MessageBar.ms-MessageBar--remove .ms-Icon--Cancel { font-size: 13.333px; } \ No newline at end of file diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx index cd9a6f5480f985..ced559b5c2aee3 100644 --- a/src/components/MessageBar/MessageBar.tsx +++ b/src/components/MessageBar/MessageBar.tsx @@ -17,13 +17,14 @@ export class MessageBar extends React.Component - + ; } return null; diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx index 2941e036d999bd..1f006cd0b2f74b 100644 --- a/src/components/Nav/Nav.tsx +++ b/src/components/Nav/Nav.tsx @@ -86,7 +86,7 @@ export class Nav extends React.Component { className='ms-Nav-groupButton' onClick={ this._onGroupHeaderClicked.bind(this, groupIndex) } > - + { group.name } : null) } diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index c57818aeedf0a8..cd7d718992c4ca 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -80,7 +80,7 @@ export class Panel extends BaseComponent { let closeButton; if (hasCloseButton) { closeButton = ; } diff --git a/src/components/PeoplePicker/PeoplePicker.tsx b/src/components/PeoplePicker/PeoplePicker.tsx index 27c0b7c2bd6fc2..a9e13f6ba80c49 100644 --- a/src/components/PeoplePicker/PeoplePicker.tsx +++ b/src/components/PeoplePicker/PeoplePicker.tsx @@ -506,7 +506,7 @@ export class PeoplePicker extends React.Component { this._removeSelectedPersona( selectedPersonas.indexOf(child) ); }}> - + ); }) @@ -536,7 +536,7 @@ export class PeoplePicker extends React.Component { this._removeSelectedPersona( selectedPersonas.indexOf(child) ); } }> - + ); @@ -603,8 +603,8 @@ export class PeoplePicker extends React.Component @@ -696,7 +696,7 @@ export class PeoplePicker extends React.Component { this._removeSuggestedPersona(id, personaInfo); }} > - + : null } ); diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index ad63f08bdb89fa..0b1b32bdc52a36 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -52,9 +52,9 @@ export class SearchBox extends React.Component 'is-active': hasFocus })} > - { !hasFocus && !value ? : null } + { !hasFocus && !value ? : null } - + ); } diff --git a/src/demo/components/App/AppState.ts b/src/demo/components/App/AppState.ts index 207a6063b1c820..7511cd84768957 100644 --- a/src/demo/components/App/AppState.ts +++ b/src/demo/components/App/AppState.ts @@ -62,7 +62,7 @@ export const AppState: IAppState = { { component: BreadcrumbPage, name: 'Breadcrumb', - status: ExampleStatus.alpha, + status: ExampleStatus.beta, url: '#/examples/breadcrumb' }, { @@ -230,7 +230,7 @@ export const AppState: IAppState = { { component: TogglePage, name: 'Toggle', - status: ExampleStatus.alpha, + status: ExampleStatus.beta, url: '#/examples/toggle' } ], diff --git a/src/demo/components/Header/Header.tsx b/src/demo/components/Header/Header.tsx index 5de3c4c93197e2..9a74cf8a1c6231 100644 --- a/src/demo/components/Header/Header.tsx +++ b/src/demo/components/Header/Header.tsx @@ -58,11 +58,11 @@ export class Header extends React.Component {
        { (responsiveMode <= ResponsiveMode.large) && ( ) }
        - + { title }
        @@ -71,7 +71,7 @@ export class Header extends React.Component { { link.name } )).concat([ ]) } diff --git a/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts b/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts index d8047337e81610..d7946a449cada6 100644 --- a/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts +++ b/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts @@ -2,25 +2,25 @@ export const itemsNonFocusable = [ { key: 'newItem', name: 'New', - icon: 'circlePlus', + icon: 'CirclePlus', onClick: () => { return; }, items: [ { key: 'emailMessage', name: 'Email message', - icon: 'mail' + icon: 'Mail' }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'calendar' + icon: 'Calendar' } ] }, { key: 'upload', name: 'Upload', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } } ]; @@ -29,12 +29,12 @@ export const farItemsNonFocusable = [ { key: 'saveStatus', name: 'Your page has been saved', - icon: 'check' + icon: 'CheckMark' }, { key: 'publish', name: 'Publish', - icon: 'story', + icon: 'ReadingMode', onClick: () => { return; } } ]; \ No newline at end of file diff --git a/src/demo/pages/CommandBarPage/examples/data.ts b/src/demo/pages/CommandBarPage/examples/data.ts index 8c6cb3371ddd83..df6b28b3817e98 100644 --- a/src/demo/pages/CommandBarPage/examples/data.ts +++ b/src/demo/pages/CommandBarPage/examples/data.ts @@ -2,55 +2,55 @@ export const items = [ { key: 'newItem', name: 'New', - icon: 'circlePlus', + icon: 'CirclePlus', onClick: () => { return; }, items: [ { key: 'emailMessage', name: 'Email message', - icon: 'mail' + icon: 'Mail' }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'calendar' + icon: 'Calendar' } ] }, { key: 'upload', name: 'Upload', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } }, { key: 'share', name: 'Share', - icon: 'share', + icon: 'Share', onClick: () => { return; } }, { key: 'download', name: 'Download', - icon: 'download', + icon: 'Download', onClick: () => { return; } }, { key: 'move', name: 'Move to...', - icon: 'folderMove', + icon: 'MoveToFolder', onClick: () => { return; } }, { key: 'copy', name: 'Copy to...', - icon: 'copy', + icon: 'Copy', onClick: () => { return; } }, { key: 'rename', name: 'Rename...', - icon: 'editBox', + icon: 'Edit', onClick: () => { return; } } ]; @@ -92,37 +92,37 @@ export const iconOnlyItems = [ { key: 'upload', name: '', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } }, { key: 'share', name: '', - icon: 'share', + icon: 'Share', onClick: () => { return; } }, { key: 'download', name: '', - icon: 'download', + icon: 'Download', onClick: () => { return; } }, { key: 'move', name: '', - icon: 'folderMove', + icon: 'MoveToFolder', onClick: () => { return; } }, { key: 'copy', name: '', - icon: 'copy', + icon: 'Copy', onClick: () => { return; } }, { key: 'rename', name: '', - icon: 'editBox', + icon: 'Edit', onClick: () => { return; } } ]; @@ -131,17 +131,17 @@ export const overflowItems = [ { key: 'move', name: 'Move to...', - icon: 'folderMove' + icon: 'MoveToFolder' }, { key: 'copy', name: 'Copy to...', - icon: 'copy' + icon: 'Copy' }, { key: 'rename', name: 'Rename...', - icon: 'editBox' + icon: 'Edit' } ]; From 7923bd24f5ef612d72d22c791a7151a612dbb90c Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Mon, 1 Aug 2016 13:04:29 -0700 Subject: [PATCH 15/15] One more --- src/components/GroupedList/GroupHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx index c08f3a4e897115..cddcb0f37ef175 100644 --- a/src/components/GroupedList/GroupHeader.tsx +++ b/src/components/GroupedList/GroupHeader.tsx @@ -86,7 +86,7 @@ export class GroupHeader extends React.Component -