diff --git a/common/changes/office-ui-fabric-react/list-examples_2019-03-27-23-59.json b/common/changes/office-ui-fabric-react/list-examples_2019-03-27-23-59.json new file mode 100644 index 0000000000000..cbd812eb14988 --- /dev/null +++ b/common/changes/office-ui-fabric-react/list-examples_2019-03-27-23-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "List and other example updates", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "elcraig@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md index 07e7c69b1a686..93dc646d825e5 100644 --- a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md +++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md @@ -4,4 +4,4 @@ When considering their place in a layout, contemplate the order in which a user While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow. -Note that both iconProps and menuIconProps take IIconProps to specify name and type. \ No newline at end of file +Note that both `iconProps` and `menuIconProps` take `IIconProps` to specify icon name and type. diff --git a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx index 182b04667dc82..13b72154725ac 100644 --- a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { Link } from 'office-ui-fabric-react/lib/Link'; -import './Link.Example.scss'; +import * as styles from './Link.Example.scss'; export class LinkBasicExample extends React.Component { public render(): JSX.Element { return ( -
+
When a link has an href, it renders as an anchor tag. Without an href, diff --git a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss index 6d8ae071e718d..39a9b159b3288 100644 --- a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss +++ b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss @@ -1,37 +1,35 @@ @import '../../../common/common'; // UHF overrides link color and state so we need to re-assign them for the website documentation -:global { - .docs-LinkExample { - .ms-Link { - // Element: ms-Link root component - .root { - color: $ms-color-themePrimary; - margin: 0; - overflow: inherit; - padding: 0; - text-overflow: inherit; - } - - // State: The button is not disabled. - .isEnabled { - &:active, - &:hover, - &:active:hover { - color: $ms-color-themeDarker; - } +.linkExample { + :global(.ms-Link) { + // Element: ms-Link root component + .root { + color: $ms-color-themePrimary; + margin: 0; + overflow: inherit; + padding: 0; + text-overflow: inherit; + } - &:focus { - color: $ms-color-themePrimary; - } + // State: The button is not disabled. + .isEnabled { + &:active, + &:hover, + &:active:hover { + color: $ms-color-themeDarker; } - // State: The button is disabled. - .isDisabled { - color: $ms-color-neutralTertiary; - pointer-events: none; - cursor: default; + &:focus { + color: $ms-color-themePrimary; } } + + // State: The button is disabled. + .isDisabled { + color: $ms-color-neutralTertiary; + pointer-events: none; + cursor: default; + } } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md index 5e9f479fd6a6c..893912ad565e1 100644 --- a/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md +++ b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md @@ -1,24 +1,22 @@ List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately. -**Performance is important, and DOM content is expensive. Therefore limit what you render.** Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive. +**Performance is important, and DOM content is expensive. Therefore, limit what you render.** List applies this principle by using UI virtualization. Unlike a simple `for` loop that renders all items in a set, a List only renders a subset of items, and as you scroll around, the subset of rendered content is shifted. This gives a much better experience for large sets, especially when the per-item components are complex/render-intensive/network-intensive. -Lists break down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about. +List breaks down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about. -Note: although `onRenderCell` is an optional member of `IListProps`, if you do not provide the method, the `List` will still attempt to render the `name` property for each object within the provided `items` array. +Note: if `onRenderCell` is not provided in `IListProps`, the List will attempt to render the `name` property for each object in the `items` array. ## My scrollable content isn't updating on scroll! What should I do? Add the `data-is-scrollable="true"` attribute to your scrollable element containing the List. -By default, List will use the `BODY` element as the scrollable element. If you contain the List within a scrollable `DIV` using `overflow: auto` or `scroll`, the List needs to listen for scroll events on that element instead. On initialization, the List will traverse up the DOM looking for the first element with the `data-is-scrollable` attribute to know when element to listen to for knowing when to re-evaulate the visible window. +By default, List will use the `` element as the scrollable element. If you contain the List within a scrollable `
` using `overflow: auto` or `scroll`, the List needs to listen for scroll events on that element instead. On initialization, the List will traverse up the DOM looking for the first element with the `data-is-scrollable` attribute to know which element to listen to for knowing when to re-evaulate the visible window. ## My List is not re-rendering when I mutate its items! What should I do? -To determine if the List should re-render its contents, the component performs a referential equality check within its `shouldComponentUpdate` method. -This is done to minimize the performance overhead associating with re-rendering the virtualized List pages, as recommended by the [React documentation](https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data). +To determine if the List should re-render its contents, the component performs a referential equality check on the `items` array in its `shouldComponentUpdate` method. This is done to minimize the performance overhead associating with re-rendering the virtualized List pages, as recommended by the [React documentation](https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data). -As a result of this implementation, the List will not determine it should re-render if the array values are mutated. -To avoid this problem, we recommend re-creating the items array backing the List by using a method such as `Array.prototype.concat` or ES6 spread syntax shown below: +As a result of this implementation, the List will not determine it should re-render if values _within_ the array are mutated. To avoid this problem, we recommend re-creating the `items` array using a method such as `Array.prototype.concat` or ES6 spread syntax shown below: ```tsx public appendItems(): void { @@ -36,4 +34,4 @@ public render(): JSX.Element { } ``` -By re-creating the items array without mutating the values, the List will correctly determine its contents have changed and that it should re-render the new values. +Since the `items` array has been re-created, the List will conclude that its contents have changed and it should re-render the new values. diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss index 65bbe32ac6010..8dc48cc0f580a 100644 --- a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss +++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss @@ -1,48 +1,47 @@ @import '../../../common/common'; -:global { - .ms-ListBasicExample-itemCell { - @include focus-border(); - - min-height: 54px; - padding: 10px; - box-sizing: border-box; - border-bottom: 1px solid $bodyDividerColor; - display: flex; - } +.itemCell { + @include focus-border(); + + min-height: 54px; + padding: 10px; + box-sizing: border-box; + border-bottom: 1px solid $bodyDividerColor; + display: flex; - .ms-ListBasicExample-itemCell:hover { + &:hover { background: #EEE; } +} - .ms-ListBasicExample-itemImage { - flex-shrink: 0; - } - .ms-ListBasicExample-itemContent { - @include margin-left(10px); - overflow: hidden; - flex-grow: 1; - } +.itemImage { + flex-shrink: 0; +} - .ms-ListBasicExample-itemName { - @include ms-font-xl; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +.itemContent { + @include margin-left(10px); + overflow: hidden; + flex-grow: 1; +} - .ms-ListBasicExample-itemIndex { - font-size: $ms-font-size-s; - color: $ms-color-neutralTertiary; - margin-bottom: 10px; - } +.itemName { + @include ms-font-xl; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} - .ms-ListBasicExample-chevron { - align-self: center; - @include margin-left(10px); - color: $ms-color-neutralTertiary; - font-size: $ms-font-size-l; - flex-shrink: 0; - } +.itemIndex { + font-size: $ms-font-size-s; + color: $ms-color-neutralTertiary; + margin-bottom: 10px; +} + +.chevron { + align-self: center; + @include margin-left(10px); + color: $ms-color-neutralTertiary; + font-size: $ms-font-size-l; + flex-shrink: 0; } diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx index 784b457292c95..52cac0b69f752 100644 --- a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx @@ -5,7 +5,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { List } from 'office-ui-fabric-react/lib/List'; -import './List.Basic.Example.scss'; +import * as styles from './List.Basic.Example.scss'; export type IExampleItem = { name: string; thumbnail: string; description: string }; @@ -54,14 +54,14 @@ export class ListBasicExample extends React.Component - -
-
{item.name}
-
{`Item ${index}`}
-
{item.description}
+
+ +
+
{item.name}
+
{`Item ${index}`}
+
{item.description}
- +
); } diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.scss b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.scss index 3c2886cfba587..17710fdd77b0c 100644 --- a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.scss +++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.scss @@ -1,39 +1,33 @@ @import '../../../common/common'; -:global { - .ms-ListScrollingExample { - &-container { - overflow: auto; - max-height: 500px; - margin-top: 20px; - } +.container { + overflow: auto; + max-height: 500px; + margin-top: 20px; +} - &-itemCell { - .ms-ListScrollingExample-itemContent { - @include ms-font-m; - @include ms-normalize; - @include ms-clearfix; - position: relative; - display: block; +.itemContent { + @include ms-font-m; + @include ms-normalize; + @include ms-clearfix; + position: relative; + display: block; - border-left: 3px solid $ms-color-themePrimary; - padding-left: 27px; // Reduce padding to allow room for border. + border-left: 3px solid $ms-color-themePrimary; + padding-left: 27px; // Reduce padding to allow room for border. +} - &-odd { - height: 50px; - line-height: 50px; - background: $ms-color-neutralLighter; - } +.itemContentOdd { + height: 50px; + line-height: 50px; + background: $ms-color-neutralLighter; +} - &-even { - height: 25px; - line-height: 25px; - } - } - } +.itemContentEven { + height: 25px; + line-height: 25px; +} - &-selected { - background: lightblue; - } - } +.selected { + background: lightblue; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx index 092673d973dcf..90b711d17b406 100644 --- a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx @@ -5,8 +5,8 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { List, ScrollToMode } from 'office-ui-fabric-react/lib/List'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import './List.Scrolling.Example.scss'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; +import * as styles from './List.Scrolling.Example.scss'; export type IExampleItem = { name: string }; @@ -72,7 +72,7 @@ export class ListScrollingExample extends React.Component
-
+
@@ -123,14 +123,8 @@ export class ListScrollingExample extends React.Component { return ( -
-
+
+
{index}   {item.name}
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.scss b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.scss index 1b97f51657c24..2134a48152884 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.scss +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.scss @@ -1,37 +1,35 @@ @import '../../../common/common'; -:global { - .ms-MarqueeSelectionBasicExample-photoList { - display: inline-block; - border: 1px solid $ms-color-neutralTertiary; - margin: 0; - padding: 10px; - overflow: hidden; - user-select: none; - } +.photoList { + display: inline-block; + border: 1px solid $ms-color-neutralTertiary; + margin: 0; + padding: 10px; + overflow: hidden; + user-select: none; +} - .ms-MarqueeSelectionBasicExample-photoCell { - position: relative; - display: inline-block; - margin: 2px; - box-sizing: border-box; - background: $ms-color-neutralLighter; - line-height: 100px; - vertical-align: middle; - text-align: center; +.photoCell { + position: relative; + display: inline-block; + margin: 2px; + box-sizing: border-box; + background: $ms-color-neutralLighter; + line-height: 100px; + vertical-align: middle; + text-align: center; - &.is-selected { - background: $ms-color-themeLighter; + &:global(.is-selected) { + background: $ms-color-themeLighter; - &:after { - content: ''; - position: absolute; - right: 0px; - left: 0px; - top: 0px; - bottom: 0px; - border: 1px solid $ms-color-themePrimary; - } + &:after { + content: ''; + position: absolute; + right: 0px; + left: 0px; + top: 0px; + bottom: 0px; + border: 1px solid $ms-color-themePrimary; } } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx index dbf843fb856f7..c82aa343ecde9 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx @@ -3,9 +3,8 @@ import * as React from 'react'; import { css, createArray } from 'office-ui-fabric-react/lib/Utilities'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { MarqueeSelection, Selection, IObjectWithKey } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import './MarqueeSelection.Basic.Example.scss'; -import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; -const exampleStyles: any = exampleStylesImport; +import * as styles from './MarqueeSelection.Basic.Example.scss'; +import * as exampleStyles from '../../../common/_exampleStyles.scss'; interface IPhoto extends IObjectWithKey { url: string; @@ -59,11 +58,11 @@ export class MarqueeSelectionBasicExample extends React.Component<{}, IMarqueeSe

Drag a rectangle around the items below to select them:

-
    +
      {PHOTOS.map((photo, index) => (
      } ], diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.scss b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.scss deleted file mode 100644 index 947cb3433f8d7..0000000000000 --- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.scss +++ /dev/null @@ -1,7 +0,0 @@ -:global { - - .ms-SearchBoxSmallExample { - width: 208px; - } - -} diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx index 37be0ec8be17d..20f62f563041c 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx @@ -1,26 +1,24 @@ import * as React from 'react'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; -import './SearchBox.Small.Example.scss'; // tslint:disable:jsx-no-lambda export class SearchBoxSmallExample extends React.Component { public render(): JSX.Element { return ( -
      - { - console.log('Custom onEscape Called'); - }} - onClear={ev => { - console.log('Custom onClear Called'); - }} - onChange={newValue => console.log('SearchBox onChange fired: ' + newValue)} - onSearch={newValue => console.log('SearchBox onSearch fired: ' + newValue)} - onFocus={() => console.log('onFocus called')} - onBlur={() => console.log('onBlur called')} - /> -
      + { + console.log('Custom onEscape Called'); + }} + onClear={ev => { + console.log('Custom onClear Called'); + }} + onChange={newValue => console.log('SearchBox onChange fired: ' + newValue)} + onSearch={newValue => console.log('SearchBox onSearch fired: ' + newValue)} + onFocus={() => console.log('onFocus called')} + onBlur={() => console.log('onBlur called')} + /> ); } } diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Link.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Link.Basic.Example.tsx.shot index 705308a810703..38915c6f0aa94 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Link.Basic.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Link.Basic.Example.tsx.shot @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Component Examples renders Link.Basic.Example.tsx correctly 1`] = ` -
      +
      When a link has an href, diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot index 710a4ad97d02e..5df40db283bf8 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot @@ -165,11 +165,9 @@ exports[`Component Examples renders MarqueeSelection.Basic.Example.tsx correctly

      Drag a rectangle around the items below to select them:

      -
        +
          + +  + +
          + -
          - -  - -
          - -
          + id="SearchBox0" + onChange={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + placeholder="Search" + value="" + />
          `;