From a142df5212cfb60bbcc59addb76887ce35f680fe Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 27 Jul 2016 14:09:02 -0700 Subject: [PATCH 01/13] 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/13] 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/13] 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/13] 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 1e06efa434f59cd0794bc593976c0df7c533e40a Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Thu, 28 Jul 2016 14:43:26 -0700 Subject: [PATCH 05/13] Updating Icons, cleaning SCSS --- src/components/Breadcrumb/Breadcrumb.scss | 219 ++++++++-------------- src/components/Breadcrumb/Breadcrumb.tsx | 6 +- 2 files changed, 84 insertions(+), 141 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index bf2614b6d1f5a7..123adeb184a2f7 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -12,175 +12,118 @@ @include ms-baseFont; margin: 23px 0 1px; - &.is-overflow { - .ms-Breadcrumb-overflow { - display: inline; - } + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 11px 7px; } -} -.ms-Breadcrumb-chevron { - font-size: $ms-font-size-s; - color: $ms-color-neutralSecondary; - vertical-align: top; - margin: 11px 7px; -} - -.ms-Breadcrumb-list { - display: inline; - white-space: nowrap; - padding: 0; - margin: 0; - - .ms-Breadcrumb-listItem { - list-style-type: none; - vertical-align: top; - margin: 0; + .ms-Breadcrumb-list { + white-space: nowrap; padding: 0; - display: inline-block; + margin: 0; - &:last-of-type { - .ms-Breadcrumb-chevron { - display: none; + .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + position: relative; + + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; + } } } } -} -.ms-Breadcrumb-overflow { - display: none; - position: relative; - - .ms-Breadcrumb-overflowButton { - font-size: 16px; + .ms-Breadcrumb-overflow { display: inline-block; - color: $ms-color-themePrimary; - padding: 8px; - cursor: pointer; - vertical-align: top; - } -} - -.ms-Breadcrumb-overflowMenu { - display: none; - position: absolute; - margin-right: -2px; - - &.is-open { - display: block; - top: 36px; - left: 0; - @include drop-shadow; - background-color: $ms-color-white; - border: 1px solid $ms-color-neutralTertiaryAlt; - z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); - } - - &::before { - position: absolute; - @include drop-shadow; - top: -6px; - left: 6px; - content: ' '; - width: 16px; - height: 16px; - transform: rotate(45deg); - background-color: $ms-color-white; - } - - .ms-ContextualMenu { - border: 0; - box-shadow: none; position: relative; - width: 190px; - &.is-open { - margin-bottom: 0; + .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: $ms-color-themePrimary; + padding: 8px; + cursor: pointer; + vertical-align: top; } } -} - -.ms-Breadcrumb-itemLink, -.ms-Breadcrumb-overflowButton { - text-decoration: none; - outline: transparent; - - &:hover { - background-color: $ms-color-neutralLighter; - cursor: pointer; - } - &:focus { - outline: $ms-color-neutralSecondaryAlt solid 1px; - color: $ms-color-black; - } - - &:active { + .ms-Breadcrumb-itemLink, + .ms-Breadcrumb-overflowButton { + text-decoration: none; outline: transparent; - background-color: $ms-color-neutralTertiaryAlt; - } -} -.ms-Breadcrumb-itemLink { - font-weight: $ms-font-weight-light; - font-size: $ms-font-size-xl; - color: $ms-color-neutralPrimary; - display: inline-block; - padding: 0 4px; - max-width: 160px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - vertical-align: top; -} + &:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + } + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-black; + } -@media screen and (max-width: $ms-screen-md-max) {å - .ms-Breadcrumb { - margin: 10px 0; + &:active { + outline: transparent; + background-color: $ms-color-neutralTertiaryAlt; + } } .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-l; + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; } - .ms-Breadcrumb-chevron { - font-size: 10px; - margin: 8px 5px; - } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - font-size: 16px; - padding: 5px 4px; + @media screen and (max-width: $ms-screen-md-max) { + margin: 10px 0; + + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; } - } -} -@media screen and (max-width: $ms-screen-sm-max) { - .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-m; - max-width: 116px; - } + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 8px 5px; + } - .ms-Breadcrumb-chevron { - margin: 5px 4px; + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 5px 4px; + } + } } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding: 2px 4px; + @media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: 116px; } - } -} -// TODO: Overrides that need to be removed. + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } -.ms-Breadcrumb-overflow { - display: inline-block; + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } + } + } } -.ms-Breadcrumb-overflowButton { - line-height: 12px; - margin-right: 0px; -} \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index a1b5c48305291b..77c6b1eb577d4c 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -76,13 +76,13 @@ export class Breadcrumb extends React.Component { renderedOverflowItems && renderedOverflowItems.length ? (
  • -
    - +
    • ) : (null) } { renderedItems.map( @@ -94,7 +94,7 @@ export class Breadcrumb extends React.Component { item.text } - + )) } From 5dbad93075892b4be447fa3d49c4e6068ba9f634 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 28 Jul 2016 15:06:49 -0700 Subject: [PATCH 06/13] 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 07/13] 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 ( -
      -
      +