From 39f5a6472b7e78453efafb58ff46afb921631a80 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 28 Feb 2017 14:24:53 -0800 Subject: [PATCH] CSS Modules: Document Card (#1149) * DetailsList: Fixing scroll utilities to handle body scroll better. (#384) * Fixing scroll utilities to handle body scroll better. * Updating appstate to support navigating directly to example pages. http://localhost:4321/index.html#/tests/detailslistbasicexample * If header is not displayed, we nullref pressing key up. * Updating to measure window correctly. * Fixing keys error. * Moving getClientRect to utility for window-sensitive scenarios. * Updating marquee selection and autoscroll to work with body scroll. * lint fixes. * Fix FacePile example onclick for RK. Remove stray commas from Layer/Button pages (#383) * Fix parameter order for FacePile example props * Fix FacePile example onClick handler. Remove 2 stray commas from Button and Layer component pages * Implement: Contextualmenu gets window from target element. (#387) * added in the ability for contextualmenu projection. * fixed lint problems * v0.56.2 * Update ListPage.tsx * CSSify DocumentCard * Change classnames in document card and fix visual regressions * Move DocumentCard styles into one root scss file and move style from global to example page * Update document card to not rely on persona * Moved details styles into global class in document card * isFileList to previewIsFilesList --- .../examples/DocumentCard.Compact.Example.tsx | 4 +- .../components/DocumentCard/DocumentCard.scss | 334 ++++++++++++++---- .../components/DocumentCard/DocumentCard.tsx | 7 +- .../DocumentCard/DocumentCardActions.scss | 48 --- .../DocumentCard/DocumentCardActions.tsx | 9 +- .../DocumentCard/DocumentCardActivity.scss | 75 ---- .../DocumentCard/DocumentCardActivity.tsx | 18 +- .../DocumentCard/DocumentCardLocation.scss | 20 -- .../DocumentCard/DocumentCardLocation.tsx | 6 +- .../DocumentCard/DocumentCardPreview.scss | 59 ---- .../DocumentCard/DocumentCardPreview.tsx | 12 +- .../DocumentCard/DocumentCardTitle.scss | 16 - .../DocumentCard/DocumentCardTitle.tsx | 9 +- 13 files changed, 306 insertions(+), 311 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss diff --git a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx index 85648cc0128307..8dd62428992f5e 100644 --- a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx +++ b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx @@ -48,7 +48,7 @@ export class DocumentCardCompactExample extends React.Component {
-
+
@@ -65,7 +65,7 @@ export class DocumentCardCompactExample extends React.Component {

-

+
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 4b97537d07aa91..9df484c755e326 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -1,80 +1,288 @@ @import '../../common/common'; -:global { - .ms-DocumentCard { - -webkit-font-smoothing: antialiased; - background-color: $ms-color-white; - border: 1px solid $ms-color-neutralLight; - box-sizing: border-box; - max-width: 320px; - min-width: 206px; - user-select: none; - position: relative; - } +.root { + -webkit-font-smoothing: antialiased; + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralLight; + box-sizing: border-box; + max-width: 320px; + min-width: 206px; + user-select: none; + position: relative; +} - .ms-DocumentCard--actionable:hover { - cursor: pointer; - border-color: $ms-color-neutralTertiaryAlt; - - // Place a heavier border within the document card - &:after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 1px solid $ms-color-neutralTertiaryAlt; - pointer-events: none; - } - } +.rootIsActionable:hover { + cursor: pointer; + border-color: $ms-color-neutralTertiaryAlt; - // When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding - .ms-DocumentCardLocation + .ms-DocumentCardTitle { - padding-top: 4px; + // Place a heavier border within the document card + &:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 1px solid $ms-color-neutralTertiaryAlt; + pointer-events: none; } +} - // Modifier: Compact layout - .ms-DocumentCard--compact { - border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color +// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding +.location + .title { + padding-top: 4px; +} + +// Modifier: Compact layout +.rootIsCompact { + border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color + display: flex; + max-width: 480px; + height: 109px; + :global(.ms-DocumentCard-details) { display: flex; - max-width: 480px; - height: 109px; - - // Remove the usual accent color from the preview - .ms-DocumentCardPreview { - border-bottom: none; - max-height: 106px; - max-width: 144px; - - .ms-DocumentCardPreview-icon { - .ms-Image-image { - max-height: 32px; - max-width: 32px; - } + flex-direction: column; + flex: 1; + justify-content: space-between; + } + // Remove the usual accent color from the preview + .preview { + border-bottom: none; + max-height: 106px; + max-width: 144px; + + .icon { + :global(.ms-Image-image) { + max-height: 32px; + max-width: 32px; } } + } - .ms-DocumentCardPreview { - @include border-right(1px, solid, $ms-color-neutralLight); - } + .preview { + @include border-right(1px, solid, $ms-color-neutralLight); + } + + .title { + padding: 12px 16px 8px 16px; + @include ms-font-m; + line-height: 16px; + } + + .activity { + padding-bottom: 12px; + } +} - // Expand the details area to fill the remaining width - .ms-DocumentCard-details { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - } - .ms-DocumentCardTitle { - padding: 12px 16px 8px 16px; - @include ms-font-m; - line-height: 16px; +/** Actions **/ +$ms-DocumentCardActions-actionSize: 34px; +$ms-DocumentCardActions-horizontalPadding: 12px; +$ms-DocumentCardActions-verticalPadding: 4px; + +.actions { + height: $ms-DocumentCardActions-actionSize; + padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding; + position: relative; +} + +.action { + @include float(left); + @include margin-right(4px); + color: $ms-color-neutralSecondary; + cursor: pointer; + + :global(.ms-Button) { + font-size: 16px; + height: $ms-DocumentCardActions-actionSize; + width: $ms-DocumentCardActions-actionSize; + } + + :global(.ms-Button:hover) { + :global(.ms-Button-icon) { + color: #1174c3; + cursor: pointer; } + } +} + +.views { + @include text-align(right); + line-height: $ms-DocumentCardActions-actionSize; + + :global(.ms-Icon) { + @include margin-right(4px); + font-size: $ms-icon-size-m; + vertical-align: top; + } +} + + +/** Activity **/ +$ms-DocumentCardActivity-horizontalPadding: 16px; +$ms-DocumentCardActivity-imageSize: 25px; +$ms-DocumentCardActivity-verticalPadding: 8px; +$ms-DocumentCardActivity-personaTextGutter: 8px; + +.activity { + padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding; + position: relative; +} + +.activityIsMultiplePeople { + .avatar:nth-of-type(2) { + @include margin-left(-16px); + } + + .activityDetails { + @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter); + } +} + +.avatars { + @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance +} + +.avatar { + border: 2px solid #fafafa; // Match the background of the card + border-radius: 50%; + height: $ms-DocumentCardActivity-imageSize; + width: $ms-DocumentCardActivity-imageSize; + display: inline-block; + position: relative; + overflow: hidden; + text-align: center; + + :global(.ms-Persona-initials) { + height: $ms-DocumentCardActivity-imageSize; + line-height: $ms-DocumentCardActivity-imageSize; + font-size: $ms-font-size-s; + } + + img { + width: 100%; + height: 100%; + border-radius: 50%; + } +} + +.avatarInitials { + background: $ms-color-themePrimary; + color: $ms-color-white; + font-weight: 100; +} - .ms-DocumentCardActivity{ - padding-bottom: 12px; +.activityDetails { + @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter); + height: $ms-DocumentCardActivity-imageSize; + position: absolute; + top: $ms-DocumentCardActivity-verticalPadding; + width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding}); +} + +.name, +.activityActivity { + display: block; + @include ms-font-s; + color: $ms-color-neutralSecondaryAlt; + line-height: 15px; + height: 15px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.name { + color: $ms-color-neutralPrimary; + @include ms-fontWeight-semibold; +} + +/** Location **/ +.location { + @include ms-font-s; + color: $ms-color-neutralPrimary; + display: block; + padding: 8px 16px; + position: relative; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover { + color: $ms-color-themePrimary; + cursor: pointer; + } +} + + +/** Preview **/ +.preview { + border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color + position: relative; + background-color: $ms-color-neutralLighterAlt; + overflow: hidden; + + &.previewIsFileList { + background-color: $ms-color-white; + } +} + +.icon { + @include left(10px); + bottom: 10px; + position: absolute; +} + +.fileList { + @include padding(16px, 16px, 0, 16px); + list-style-type: none; + margin: 0; + + li { + height: 16px; + line-height: 16px; // Vertically center the text + margin-bottom: 8px; + overflow: hidden; + @include padding-left(24px); // Make room for icon + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + } + + a { + font-size: $ms-font-size-s; + text-decoration: none; + color: $ms-color-neutralDark; + + &:hover { + color: $ms-color-themePrimary; } } } + +.fileListIcon { + @include left(0); + position: absolute; + top: 0; +} + +.fileListMore { + @include padding(0px, 16px, 8px, 16px); + display: block; + font-size: $ms-font-size-s; +} + + +/** Title **/ +$DocumentCard-title-lineHeight: 21px; +.title { + padding: 8px 16px; + display: block; + @include ms-font-l; + color: $ms-color-neutralPrimary; + height: 38px; // Two lines of text, making sure the third line is hidden + line-height: $DocumentCard-title-lineHeight; + overflow: hidden; + word-wrap: break-word; +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx index f5385e58b63127..124f52758f1206 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx @@ -4,7 +4,7 @@ import { autobind, css } from '../../Utilities'; -import './DocumentCard.scss'; +import styles from './DocumentCard.scss'; export class DocumentCard extends React.Component { public static defaultProps: IDocumentCardProps = { @@ -28,9 +28,10 @@ export class DocumentCard extends React.Component { className={ css( 'ms-DocumentCard', + styles.root, { - 'ms-DocumentCard--actionable': actionable, - 'ms-DocumentCard--compact': type === DocumentCardType.compact ? true : false + ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable, + ['ms-DocumentCard--compact ' + styles.rootIsCompact]: type === DocumentCardType.compact ? true : false }, className ) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss deleted file mode 100644 index 1a244eae47a472..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import '../../common/common'; - -$ms-DocumentCardActions-actionSize: 34px; -$ms-DocumentCardActions-horizontalPadding: 12px; -$ms-DocumentCardActions-verticalPadding: 4px; - -:global { - .ms-DocumentCardActions { - height: $ms-DocumentCardActions-actionSize; - padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding; - position: relative; - } - - .ms-DocumentCardActions-actions { - @include left($ms-DocumentCardActions-horizontalPadding); - position: absolute; - top: $ms-DocumentCardActions-verticalPadding; - } - - .ms-DocumentCardActions-action { - @include float(left); - @include margin-right(4px); - color: $ms-color-neutralSecondary; - cursor: pointer; - - .ms-Button { - font-size: 16px; - height: $ms-DocumentCardActions-actionSize; - width: $ms-DocumentCardActions-actionSize; - } - - .ms-Button:hover .ms-Button-icon { - color: #1174c3; - cursor: pointer; - } - } - - .ms-DocumentCardActions-views { - @include text-align(right); - line-height: $ms-DocumentCardActions-actionSize; - - .ms-Icon { - @include margin-right(4px); - font-size: $ms-icon-size-m; - vertical-align: top; - } - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx index f087f049a11ec2..ee4826c87b3e7d 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx @@ -1,26 +1,27 @@ import * as React from 'react'; +import { css } from '../../Utilities'; import { IDocumentCardActionsProps } from './DocumentCard.Props'; import { Button, ButtonType } from '../../Button'; -import './DocumentCardActions.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardActions extends React.Component { public render() { let { actions, views } = this.props; return ( -
+
{ actions && actions.map((action, index) => { action.buttonType = ButtonType.icon; return ( -
+
); }) } { views > 0 && ( -
+
{ views }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss deleted file mode 100644 index 11043ef6fa4e55..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import '../../common/common'; - -$ms-DocumentCardActivity-horizontalPadding: 16px; -$ms-DocumentCardActivity-imageSize: 25px; -$ms-DocumentCardActivity-verticalPadding: 8px; -$ms-DocumentCardActivity-personaTextGutter: 8px; - -:global { - .ms-DocumentCardActivity { - padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding; - position: relative; - } - - .ms-DocumentCardActivity--multiplePeople { - .ms-DocumentCardActivity-avatar:nth-of-type(2) { - @include margin-left(-16px); - } - - .ms-DocumentCardActivity-details { - @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter); - } - } - - .ms-DocumentCardActivity-avatars { - @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance - } - - .ms-DocumentCardActivity-avatar { - border: 2px solid #fafafa; // Match the background of the card - border-radius: 50%; - height: $ms-DocumentCardActivity-imageSize; - width: $ms-DocumentCardActivity-imageSize; - display: inline-block; - position: relative; - overflow: hidden; - text-align: center; - - .ms-Persona-initials { - height: $ms-DocumentCardActivity-imageSize; - line-height: $ms-DocumentCardActivity-imageSize; - font-size: $ms-font-size-s; - } - - img { - width: 100%; - height: 100%; - border-radius: 50%; - } - } - - .ms-DocumentCardActivity-details { - @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter); - height: $ms-DocumentCardActivity-imageSize; - position: absolute; - top: $ms-DocumentCardActivity-verticalPadding; - width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding}); - } - - .ms-DocumentCardActivity-name, - .ms-DocumentCardActivity-activity { - display: block; - @include ms-font-s; - color: $ms-color-neutralSecondaryAlt; - line-height: 15px; - height: 15px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .ms-DocumentCardActivity-name { - color: $ms-color-neutralPrimary; - @include ms-fontWeight-semibold; - } -} diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index a5de70b2195a30..2a9063bfc9bdc7 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -6,7 +6,7 @@ import { PERSONA_INITIALS_COLOR, PersonaInitialsColor } from '../../Persona'; -import './DocumentCardActivity.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardActivity extends React.Component { public render() { @@ -14,13 +14,13 @@ export class DocumentCardActivity extends React.Component 0 && -
1 +
1 }) }> { this._renderAvatars(people) } -
- { this._getNameString(people) } - { activity } +
+ { this._getNameString(people) } + { activity }
); @@ -28,7 +28,7 @@ export class DocumentCardActivity extends React.Component { return ( -
+
{ people.length > 1 ? this._renderAvatar(people[1]) : null } { this._renderAvatar(people[0]) }
@@ -39,9 +39,9 @@ export class DocumentCardActivity extends React.Component +
{ person.initials && ( -
+
{ person.initials }
) } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss deleted file mode 100644 index 9b5b441fa8c002..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import '../../common/common'; - -:global { - .ms-DocumentCardLocation { - @include ms-font-s; - color: $ms-color-neutralPrimary; - display: block; - padding: 8px 16px; - position: relative; - text-decoration: none; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover { - color: $ms-color-themePrimary; - cursor: pointer; - } - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx index ebbc2e92c8e5fb..da11c0b26ca442 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; +import { css } from '../../Utilities'; import { IDocumentCardLocationProps } from './DocumentCard.Props'; -import './DocumentCardLocation.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardLocation extends React.Component { public render() { let { location, locationHref, ariaLabel, onClick } = this.props; return ( - { location } + { location } ); } } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss deleted file mode 100644 index 51c1c3a14ee97e..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import '../../common/common'; - -:global { - .ms-DocumentCardPreview { - border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color - position: relative; - background-color: $ms-color-neutralLighterAlt; - overflow: hidden; - - &.is-fileList { - background-color: $ms-color-white; - } - } - - .ms-DocumentCardPreview-icon { - @include left(10px); - bottom: 10px; - position: absolute; - } - - .ms-DocumentCardPreview-fileList { - @include padding(16px, 16px, 0, 16px); - list-style-type: none; - margin: 0; - - li { - height: 16px; - line-height: 16px; // Vertically center the text - margin-bottom: 8px; - overflow: hidden; - @include padding-left(24px); // Make room for icon - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - } - - a { - font-size: $ms-font-size-s; - text-decoration: none; - color: $ms-color-neutralDark; - - &:hover { - color: $ms-color-themePrimary; - } - } - } - - .ms-DocumentCardPreview-fileListIcon { - @include left(0); - position: absolute; - top: 0; - } - - .ms-DocumentCardPreview-fileListMore { - @include padding(0px, 16px, 8px, 16px); - display: block; - font-size: $ms-font-size-s; - } -} diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx index e03fd5f75a4933..1b06cd3b0058d5 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx @@ -5,7 +5,7 @@ import { autobind, css } from '../../Utilities'; -import './DocumentCardPreview.scss'; +import styles from './DocumentCard.scss'; const LIST_ITEM_COUNT = 3; @@ -32,7 +32,7 @@ export class DocumentCardPreview extends React.Component +
{ preview }
); @@ -52,7 +52,7 @@ export class DocumentCardPreview extends React.Component; + icon = ; } return ( @@ -80,7 +80,7 @@ export class DocumentCardPreview extends React.Component (
  • -
      +
        { fileListItems }
      { overflowText && - { overflowText } + { overflowText } }
    • ); diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss deleted file mode 100644 index 526739d77ad3b0..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../common/common'; - -$DocumentCard-title-lineHeight: 21px; - -:global { - .ms-DocumentCardTitle { - padding: 8px 16px; - display: block; - @include ms-font-l; - color: $ms-color-neutralPrimary; - height: 38px; // Two lines of text, making sure the third line is hidden - line-height: $DocumentCard-title-lineHeight; - overflow: hidden; - word-wrap: break-word; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 65876d671dbdb5..c84f9b709b1da6 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -4,10 +4,11 @@ import * as React from 'react'; import { BaseComponent, - autobind + autobind, + css } from '../../Utilities'; import { IDocumentCardTitleProps } from './DocumentCard.Props'; -import './DocumentCardTitle.scss'; +import styles from './DocumentCard.scss'; export interface IDocumentCardTitleState { truncatedTitleFirstPiece?: string; @@ -69,11 +70,11 @@ export class DocumentCardTitle extends BaseComponent{ truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    +
    { truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    ); } else { documentCardTitle = ( -
    { title }
    +
    { title }
    ); }