diff --git a/.pullapprove.yml b/.pullapprove.yml index dfc81cba19d198..436823b4b391bc 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -11,5 +11,8 @@ reviewers: - mikewheaton - dzearing - cliffkoh + - aditima + - yiminwu + - antonlabunets 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/package.json b/package.json index 6dda69895b96c0..b1c237dda6fc95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.35.0", + "version": "0.36.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/src/common/_semanticColorVariables.scss b/src/common/_semanticColorVariables.scss index 525b3e1c62ab98..675b1281a604dd 100644 --- a/src/common/_semanticColorVariables.scss +++ b/src/common/_semanticColorVariables.scss @@ -22,4 +22,7 @@ $selectedForegroundColor: $ms-color-neutralPrimary; $selectedHoverBackgroundColor: $ms-color-neutralLight; $selectedHoverForegroundColor: $ms-color-neutralDark; +$selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt; +$selectedActiveForegroundColor: $ms-color-neutralPrimary; + $dividerColor: $ms-color-neutralLight; diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index bf2614b6d1f5a7..a1abf188b5915b 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -7,30 +7,28 @@ // -------------------------------------------------- // Breadcrumb styles +$Breadcrumb-overflowButtonColor: $ms-color-themePrimary; +$Breadcrumb-overflowButtonSize: 16px; +$Breadcrumb-buttonHoverColor: $ms-color-themeDark; +$Breadcrumb-itemMaxWidth: 160px; +$Breadcrumb-itemMaxWidth-sm: 116px; .ms-Breadcrumb { @include ms-baseFont; margin: 23px 0 1px; - &.is-overflow { - .ms-Breadcrumb-overflow { - display: inline; - } + .ms-Breadcrumb-list { + white-space: nowrap; + padding: 0; + margin: 0; } -} - -.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-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 11px 7px; + } .ms-Breadcrumb-listItem { list-style-type: none; @@ -38,149 +36,99 @@ 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; - 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-Breadcrumb-itemLink { + @include focus-border; + @include ms-font-xl; + display: inline-block; + padding: 0 4px; + max-width: $Breadcrumb-itemMaxWidth; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; + } } - .ms-ContextualMenu { - border: 0; - box-shadow: none; + .ms-Breadcrumb-overflow { + display: inline-block; position: relative; - width: 190px; - &.is-open { - margin-bottom: 0; + .ms-Breadcrumb-overflowButton { + font-size: $Breadcrumb-overflowButtonSize; + display: inline-block; + color: $Breadcrumb-overflowButtonColor; + 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: $selectedHoverBackgroundColor; + color: $Breadcrumb-buttonHoverColor; + cursor: pointer; + } -@media screen and (max-width: $ms-screen-md-max) {å - .ms-Breadcrumb { - margin: 10px 0; - } + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-neutralDark; + } - .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-l; + &:active { + outline: transparent; + background-color: $selectedActiveBackgroundColor; + color: $selectedActiveForegroundColor; + } } - .ms-Breadcrumb-chevron { - font-size: 10px; - margin: 8px 5px; - } + @media screen and (max-width: $ms-screen-md-max) { + margin: 11px 0 1px; - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - font-size: 16px; - padding: 5px 4px; + .ms-Breadcrumb-listItem .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: $ms-font-size-mi; + margin: 8px 5px; + } - .ms-Breadcrumb-chevron { - margin: 5px 4px; + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-m-plus; + padding: 5px 4px; + } + } } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding: 2px 4px; + @media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: $Breadcrumb-itemMaxWidth-sm; } - } -} -// 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 } - + )) } diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss index 4f1e86d504e4cd..447aa325721429 100644 --- a/src/components/Check/Check.scss +++ b/src/components/Check/Check.scss @@ -14,10 +14,7 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); .ms-CheckBox { box-sizing: border-box; - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-base; - font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; + @include ms-baseFont; min-height: 36px; position: relative; diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index d22b5f59005831..07239ff9a08e56 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -107,9 +107,7 @@ .ms-DatePicker-month, .ms-DatePicker-year { display: inline-block; - font-family: $ms-font-family-light; - font-size: 21px; - color: $ms-color-themePrimary; + @include ms-font-xl; margin-top: -1px; &:hover { @@ -152,10 +150,7 @@ height: 40px; padding: 0; line-height: 40px; - font-family: $ms-font-family-regular; - font-size: 15px; - font-weight: normal; - color: $ms-color-neutralPrimary; + @include ms-font-m-plus; } @@ -175,7 +170,7 @@ // Out of focus days. .ms-DatePicker-day--outfocus { color: $ms-color-neutralTertiary; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; } @@ -267,9 +262,7 @@ .ms-DatePicker-currentYear, .ms-DatePicker-currentDecade { display: block; - font-weight: normal; - font-family: $ms-font-family-semilight; - font-size: 21px; + @include ms-font-xl; height: 40px; line-height: 42px; @include margin-left(15px); @@ -305,9 +298,7 @@ cursor: pointer; @include float(left); @include margin(0, 10px, 10px, 0); - font-weight: normal; - font-family: $ms-font-family-regular; - font-size: 13px; + @include ms-font-s-plus; color: $ms-color-neutralPrimary; text-align: center; @@ -328,8 +319,7 @@ bottom: 9px; color: $ms-color-themePrimary; cursor: pointer; - font-family: $ms-font-family-semilight; - font-size: 13px; + @include ms-font-s-plus; height: 30px; line-height: 30px; padding: 0 10px; @@ -376,7 +366,7 @@ width: 30px; height: 30px; line-height: 30px; - font-family: $ms-font-family-semibold; + font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-s; } @@ -405,7 +395,7 @@ // Update header text styles. .ms-DatePicker-month, .ms-DatePicker-year { - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; } .ms-DatePicker-month, diff --git a/src/components/DetailsList/DetailsHeader.scss b/src/components/DetailsList/DetailsHeader.scss index 621f7835e1dc0b..9c43f9507dcb55 100644 --- a/src/components/DetailsList/DetailsHeader.scss +++ b/src/components/DetailsList/DetailsHeader.scss @@ -45,7 +45,7 @@ $resizerColor: $ms-color-neutralTertiaryAlt; color: $disabledForegroundColor; @include focus-border(); - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; position: relative; display: inline-block; box-sizing: border-box; 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