From ff794c70306aa9aff1671cae097ffa986934d90f Mon Sep 17 00:00:00 2001 From: David Zearing Date: Wed, 27 Jul 2016 15:01:44 -0700 Subject: [PATCH 1/3] Bringing over the latest updates from separat VSO repo. --- package.json | 2 +- src/Check.ts | 1 + src/GroupedList.ts | 1 + src/components/Breadcrumb/Breadcrumb.scss | 174 ++++- src/components/Button/Button.scss | 332 ++++++++- src/components/Callout/Callout.scss | 316 ++++++++- .../{DetailsList => Check}/Check.scss | 0 .../{DetailsList => Check}/Check.tsx | 0 src/components/Check/index.ts | 1 + src/components/Checkbox/Checkbox.Props.ts | 2 +- src/components/Checkbox/Checkbox.scss | 199 +++++- src/components/Checkbox/Checkbox.tsx | 2 +- src/components/ChoiceGroup/ChoiceGroup.scss | 201 +++++- src/components/CommandBar/CommandBar.scss | 6 +- src/components/CommandBar/CommandBar.tsx | 2 +- .../ContextualMenu/ContextualMenu.scss | 249 ++----- .../ContextualMenu/ContextualMenu.tsx | 8 +- src/components/DetailsList/DetailsGroup.scss | 7 - src/components/DetailsList/DetailsHeader.tsx | 4 +- .../DetailsList/DetailsList.Props.ts | 120 +--- src/components/DetailsList/DetailsList.tsx | 306 ++++----- src/components/DetailsList/DetailsRow.tsx | 4 +- src/components/Dialog/Dialog.scss | 213 +++++- src/components/Dropdown/Dropdown.scss | 249 ++++++- .../Group.tsx} | 348 +++++----- .../GroupFooter.scss | 0 .../GroupFooter.tsx | 12 +- .../GroupHeader.scss | 0 .../GroupHeader.tsx | 21 +- .../GroupSpacer.scss | 0 .../GroupSpacer.tsx | 0 .../GroupedList/GroupedList.Props.ts | 179 +++++ src/components/GroupedList/GroupedList.scss | 42 ++ src/components/GroupedList/GroupedList.tsx | 265 ++++++++ src/components/GroupedList/index.ts | 3 + src/components/Label/Label.scss | 50 +- src/components/Link/Link.scss | 38 +- src/components/List/List.Props.ts | 4 - src/components/List/List.tsx | 13 +- src/components/MessageBar/MessageBar.scss | 109 ++- src/components/Nav/Nav.Props.ts | 10 + src/components/Nav/Nav.scss | 80 ++- src/components/Nav/Nav.tsx | 64 +- src/components/Overlay/Overlay.scss | 30 +- src/components/PeoplePicker/PeoplePicker.scss | 638 +++++++++++++++++- src/components/Persona/Persona.scss | 599 +++++++++++++++- src/components/Pivot/Pivot.scss | 246 ++++++- .../ProgressIndicator/ProgressIndicator.scss | 60 +- src/components/SearchBox/SearchBox.scss | 112 ++- src/components/Slider/Slider.tsx | 10 +- src/components/Spinner/Spinner.scss | 48 +- src/components/TextField/TextField.scss | 206 +++++- .../PropertiesTable/PropertiesTable.scss | 1 - src/demo/components/app/AppState.ts | 7 + .../examples/ContextualMenu.Basic.Example.tsx | 4 +- .../examples/ContextualMenuExample.scss | 16 +- .../pages/DetailsListPage/DetailsListPage.tsx | 2 +- .../pages/GroupedListPage/GroupedListPage.tsx | 34 + .../examples/GroupedList.Basic.Example.tsx | 83 +++ .../examples/GroupedList.Custom.Example.scss | 20 + .../examples/GroupedList.Custom.Example.tsx | 67 ++ .../ListPage/examples/List.Mail.Example.scss | 232 ++++++- .../NavPage/examples/Nav.Basic.Example.scss | 9 + .../NavPage/examples/Nav.Basic.Example.tsx | 11 +- .../examples/Selection.Basic.Example.tsx | 2 +- src/demo/utilities/data.ts | 20 + src/index.ts | 1 + 67 files changed, 5278 insertions(+), 817 deletions(-) create mode 100644 src/Check.ts create mode 100644 src/GroupedList.ts rename src/components/{DetailsList => Check}/Check.scss (100%) rename src/components/{DetailsList => Check}/Check.tsx (100%) create mode 100644 src/components/Check/index.ts delete mode 100644 src/components/DetailsList/DetailsGroup.scss rename src/components/{DetailsList/DetailsGroup.tsx => GroupedList/Group.tsx} (50%) rename src/components/{DetailsList => GroupedList}/GroupFooter.scss (100%) rename src/components/{DetailsList => GroupedList}/GroupFooter.tsx (78%) rename src/components/{DetailsList => GroupedList}/GroupHeader.scss (100%) rename src/components/{DetailsList => GroupedList}/GroupHeader.tsx (90%) rename src/components/{DetailsList => GroupedList}/GroupSpacer.scss (100%) rename src/components/{DetailsList => GroupedList}/GroupSpacer.tsx (100%) create mode 100644 src/components/GroupedList/GroupedList.Props.ts create mode 100644 src/components/GroupedList/GroupedList.scss create mode 100644 src/components/GroupedList/GroupedList.tsx create mode 100644 src/components/GroupedList/index.ts create mode 100644 src/demo/pages/GroupedListPage/GroupedListPage.tsx create mode 100644 src/demo/pages/GroupedListPage/examples/GroupedList.Basic.Example.tsx create mode 100644 src/demo/pages/GroupedListPage/examples/GroupedList.Custom.Example.scss create mode 100644 src/demo/pages/GroupedListPage/examples/GroupedList.Custom.Example.tsx create mode 100644 src/demo/pages/NavPage/examples/Nav.Basic.Example.scss diff --git a/package.json b/package.json index a378f3da3f2e75..772674b5a4420a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.34.0", + "version": "0.35.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/src/Check.ts b/src/Check.ts new file mode 100644 index 00000000000000..da7523f37b386a --- /dev/null +++ b/src/Check.ts @@ -0,0 +1 @@ +export * from './components/Check/index'; diff --git a/src/GroupedList.ts b/src/GroupedList.ts new file mode 100644 index 00000000000000..c55c281b2c37c2 --- /dev/null +++ b/src/GroupedList.ts @@ -0,0 +1 @@ +export * from './components/GroupedList/index'; diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 4e10ffdb9949fc..0f31f2b6c94537 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -1,5 +1,177 @@ @import '../../common/common'; -@import '~office-ui-fabric/src/components/Breadcrumb/Breadcrumb'; + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Breadcrumb styles + + +.ms-Breadcrumb { + margin: 23px 0 1px 0; + + &.is-overflow { + .ms-Breadcrumb-overflow { + display: inline; + } + } +} + +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; + + .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; + } + } + } +} + +.ms-Breadcrumb-overflow { + display: none; + 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; + } +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + + &.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: white; + } + + .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; + + &.is-open { + margin-bottom: 0; + } + } +} + +.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 { + outline: transparent; + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Breadcrumb-itemLink { + @include ms-font-xl(); + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + + +@media screen and (max-width: $ms-screen-md-max) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; + } + + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-m; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } + } +} + +@media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } + } +} + +// TODO: Overrides that need to be removed. .ms-Breadcrumb-overflow { display: inline-block; diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index ce499ad4b7664e..804d5f1ccf0e47 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,5 +1,335 @@ @import '../../common/common'; -@import "~office-ui-fabric/src/components/Button/Button"; + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + + +.ms-Button { + @include ms-font-m; + @include ms-u-normalize; + background-color: $ms-color-neutralLighter; + border: 1px solid $ms-color-neutralLighter; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; + + &:hover { + background-color: $ms-color-neutralLight; + border-color: $ms-color-neutralLight; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:focus { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + cursor: default; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + + &:hover, + &:focus { + outline: 0; + } + } +} + +// Add space between adjacent buttons. +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-semibold; + font-size: $ms-font-size-m; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + + +//== Modifier: Primary action button +// +.ms-Button.ms-Button--primary { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + + &:focus { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDarker; + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Hero button +// +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; + + .ms-Button-icon { + color: $ms-color-themePrimary; + display: inline-block; + font-size: $ms-font-size-s; + position: relative; + top: -8px; + text-align: center; + + .ms-Icon { + border-radius: 18px; + border: 1px solid $ms-color-themePrimary; + height: 18px; + line-height: 18px; + width: 18px; + font-size: $ms-font-size-s; + margin: 0; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; + position: relative; + top: -5px; + text-decoration: none; + } + + &:hover, + &:focus { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themeDark; + } + } + + .ms-Button-label { + color: $ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themePrimary; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-neutralTertiaryAlt; + } + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Compound button +// +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; + + .ms-Button-label { + display: block; + font-family: $ms-font-family-semibold; + position: relative; + text-align: left; + margin-top: -5px; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + display: block; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-s; + position: relative; + text-align: left; + top: 3px; + } + + &:hover { + .ms-Button-description { + color: $ms-color-neutralDark; + } + } + + &:focus { + border-color: $ms-color-themePrimary; + background-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralPrimary; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + } + } + + &:active { + background-color: $ms-color-themePrimary; + + .ms-Button-description, + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + + &:focus, + &:active { + border-color: $ms-color-neutralLighter; + background-color: $ms-color-neutralLighter; + + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + } + } +} + + +//== Modifier: Command button +// +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: $ms-font-size-m; + + .ms-Button-icon { + color: $ms-color-neutralSecondary; + display: inline-block; + margin-right: 4px; + position: relative; + } + + .ms-Button-label { + font-family: $ms-font-family-regular; + } + + &:hover, + &:focus { + .ms-Button-icon { + color: $ms-color-neutralDark; + } + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + .ms-Button-icon, + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + color: $ms-color-neutralTertiaryAlt; + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + +// Add space between adjacent command buttons. +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + + +// TODO: Overrides that need to be removed. .ms-Button--icon { background-color: transparent; diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss index 646db661dd3220..99352cbf421a7b 100644 --- a/src/components/Callout/Callout.scss +++ b/src/components/Callout/Callout.scss @@ -1,5 +1,319 @@ @import '../../common/common'; -@import "~office-ui-fabric/src/components/Callout/Callout"; + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Callout styles + + +.ms-Callout { + z-index: $ms-zIndex-Callout; + margin: 16px auto; + position: relative; + width: 288px; +} + +// Mixin for arrow size and color +@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) { + border-top: 10px solid $ms-color-top; + border-right: 10px solid $ms-color-right; + border-bottom: 10px solid $ms-color-bottom; + border-left: 10px solid $ms-color-left; +} + +//= Modifier: Base styling for all callout arrows +// +.ms-Callout.ms-Callout--arrowRight, +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowBottom, +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + content: ''; + position: absolute; + transform: rotate(-45deg); + height: 0; + width: 0; + } + + &:before { + z-index: $ms-zIndex-back; + outline: 1px solid transparent; + @include drop-shadow; + } + + &:after { + z-index: $ms-zIndex-front; + } +} + + +//= Modifier: Callout with left and right arrows +// +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowRight { + &:before, + &:after { + top: 40px; + display: none; // Hide left and right arrows on sm screens + } +} + +.ms-Callout.ms-Callout--arrowLeft { + &:before, + &:after { + @include arrowBorders($ms-color-white, transparent, transparent, $ms-color-white); + left: -10px; + } +} + +.ms-Callout.ms-Callout--arrowRight { + &:before, + &:after { + @include arrowBorders(transparent, $ms-color-white, $ms-color-white, transparent); + right: -10px; + } +} + + +//= Modifier: Callout with top and bottom arrows +// +.ms-Callout.ms-Callout--arrowTop, +.ms-Callout.ms-Callout--arrowBottom { + &:before, + &:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; + } +} + +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + @include arrowBorders($ms-color-white, $ms-color-white, transparent, transparent); + top: -10px; + } +} + +.ms-Callout.ms-Callout--arrowBottom { + &:before, + &:after { + @include arrowBorders(transparent, transparent, $ms-color-white, $ms-color-white); + bottom: -10px; + } +} + +// High contrast mode styling for callout arrows +.ms-Callout.ms-Callout--arrowRight, +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowBottom, +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + @media screen and (-ms-high-contrast: active) { + border: 0; + width: 20px; + height: 20px; + background-color: $ms-color-black; + } + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-white; + } + } +} + +// The actual callout element +.ms-Callout-main { + position: relative; + background-color: $ms-color-white; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: $ms-zIndex-middle; + @include drop-shadow; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + z-index: ($ms-zIndex-Callout + $ms-zIndex-front); +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xl; +} + +.ms-Callout-subText { + margin: 0; + font-family: $ms-font-family-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; +} + +.ms-Callout-link { + font-size: $ms-font-size-m; + font-family: $ms-font-family-semilight; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; + + .ms-Link.ms-Link--hero { + position: relative; + left: -8px; // Move link inline with body text + } +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; + + &:hover .ms-Callout-actionIcon, + &:focus .ms-Callout-actionIcon { + color: $ms-color-themePrimary; + } +} + +.ms-Callout-button { + margin-right: 12px; +} + + +//= Modifier: Close button callout +// +.ms-Callout.ms-Callout--close { + .ms-Callout-title { + margin-right: 20px; // Avoid overlap with close button + } +} + + +//= Modifier: OOBE (Out of box experience) callout +// +.ms-Callout.ms-Callout--OOBE { + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowTop { + &:before, + &:after { + border-color: $ms-color-themePrimary; + background-color: transparent; + } + } + + .ms-Callout-header { + padding: 28px 24px; + background-color: $ms-color-themePrimary; + } + + .ms-Callout-title { + font-family: $ms-font-family-light; + font-size: $ms-font-size-xxl; + color: $ms-color-white; + } + + .ms-Callout-inner { + padding-top: 20px; + } + + .ms-Callout-subText { + font-size: $ms-font-size-m; + } +} + + +//= Modifier: ActionText callout +// +.ms-Callout.ms-Callout--actionText { + .ms-Callout-actions { + border-top: 1px solid $ms-color-neutralLight; + margin-bottom: -8px; + } +} + + +//= Modifier: Peek callout +// +.ms-Callout.ms-Callout--peek { + &.ms-Callout--arrowTop, + &.ms-Callout--arrowBottom { + &:before, + &:after { + left: 40px; + right: auto; + } + } + + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft { + &:before, + &:after { + top: calc('50% - 10px'); + } + } + + .ms-Callout-header { + padding-bottom: 0; + } + + .ms-Callout-title { + font-size: $ms-font-size-m; + } + + .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; + } +} + +@media (min-width: $ms-screen-md-min) { + // Make width larger and remove centering on md+ screens + .ms-Callout { + width: 300px; + margin: 16px; + } + + // Show arrows right and left + .ms-Callout.ms-Callout--arrowRight, + .ms-Callout.ms-Callout--arrowLeft { + &:before, + &:after { + display: block; + } + } +} + +// TODO: remove overrides and scrub CSS // slideRightIn20 @mixin ms-u-slideRightIn20 { diff --git a/src/components/DetailsList/Check.scss b/src/components/Check/Check.scss similarity index 100% rename from src/components/DetailsList/Check.scss rename to src/components/Check/Check.scss diff --git a/src/components/DetailsList/Check.tsx b/src/components/Check/Check.tsx similarity index 100% rename from src/components/DetailsList/Check.tsx rename to src/components/Check/Check.tsx diff --git a/src/components/Check/index.ts b/src/components/Check/index.ts new file mode 100644 index 00000000000000..96b6c5ff964240 --- /dev/null +++ b/src/components/Check/index.ts @@ -0,0 +1 @@ +export * from './Check'; \ No newline at end of file diff --git a/src/components/Checkbox/Checkbox.Props.ts b/src/components/Checkbox/Checkbox.Props.ts index b587753beb532f..7040fc9638d8e1 100644 --- a/src/components/Checkbox/Checkbox.Props.ts +++ b/src/components/Checkbox/Checkbox.Props.ts @@ -5,7 +5,7 @@ export interface ICheckboxProps extends React.Props { /** * Label to display next to the checkbox. */ - text: string; + text?: string; /** * Whether the checkbox is checked or not. diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 0df4626ef2ccda..f17399560a0d3a 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -1,6 +1,203 @@ @import '../../common/common'; -@import '~office-ui-fabric/src/components/ChoiceField/ChoiceField'; +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Choice fields (radio buttons and checkboxes) styles + +// Unselected, radio button (default) +.ms-ChoiceField { + @include ms-font-m; + @include ms-u-normalize; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + } +} + +//== State: Disabled choicefield +.ms-ChoiceField-input:disabled { + + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; + + &:before { + background-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &:after { + border-color: $ms-color-neutralLight; + } + + .ms-Label { + color: $ms-color-neutralTertiary; + } + + @media screen and (-ms-high-contrast: active) { + &:before { + background-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + &:after { + border-color: $ms-color-contrastBlackDisabled; + } + + .ms-Label { + color: $ms-color-contrastBlackDisabled; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + &:before { + background-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + + &:after { + border-color: $ms-color-contrastWhiteDisabled; + } + + .ms-Label { + color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// The original unstyled input element +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; + + &:focus:not(:disabled) { + + .ms-ChoiceField-field:after { + border-color: $ms-color-neutralSecondaryAlt; + } + } +} + +// The choicefield radio button or checkbox +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + + // The actual styled choicefield element - radio button by default + &:after { + content: ''; + display: inline-block; + border: 1px $ms-color-neutralTertiaryAlt solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; + } + + &:hover { + &:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } +} + +// A selected radio button +.ms-ChoiceField-input:checked { + + .ms-ChoiceField-field { + // Circle indicating a checked radio button + &:before { + background-color: $ms-color-neutralSecondary; + border-color: $ms-color-neutralSecondary; + color: $ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-white; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + background-color: $ms-color-black; + } + } + + &:hover:before { + background-color: $ms-color-neutralDark; + color: $ms-color-neutralDark; + } + } +} + +// Checkbox +.ms-ChoiceField-input[type="checkbox"] { + + .ms-ChoiceField-field:after { + border-radius: 0; + } +} + +// A selected checkbox +.ms-ChoiceField-input[type="checkbox"]:checked { + + .ms-ChoiceField-field { + &:before { + @include ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: $ms-font-size-s-plus; + top: 3px; + left: 3px; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-white; + border-color: transparent; + background-color: transparent; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-black; + border-color: transparent; + background-color: transparent; + } + } + } +} + + +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +// TODO: overrides that need to be removed. .ms-ChoiceField { user-select: none; } \ No newline at end of file diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 046c8381e138af..7cbc66e3525bb8 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -57,7 +57,7 @@ export class Checkbox extends React.Component { aria-checked={ isChecked } /> ); diff --git a/src/components/ChoiceGroup/ChoiceGroup.scss b/src/components/ChoiceGroup/ChoiceGroup.scss index 07ae4dbb7fd1ac..f92589521b42f6 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.scss +++ b/src/components/ChoiceGroup/ChoiceGroup.scss @@ -1,5 +1,204 @@ @import '../../common/common'; -@import "~office-ui-fabric/src/components/ChoiceField/ChoiceField"; + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Choice fields (radio buttons and checkboxes) styles + + +// Unselected, radio button (default) +.ms-ChoiceField { + @include ms-font-m; + @include ms-u-normalize; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + } +} + +//== State: Disabled choicefield +.ms-ChoiceField-input:disabled { + + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; + + &:before { + background-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &:after { + border-color: $ms-color-neutralLight; + } + + .ms-Label { + color: $ms-color-neutralTertiary; + } + + @media screen and (-ms-high-contrast: active) { + &:before { + background-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + &:after { + border-color: $ms-color-contrastBlackDisabled; + } + + .ms-Label { + color: $ms-color-contrastBlackDisabled; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + &:before { + background-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + + &:after { + border-color: $ms-color-contrastWhiteDisabled; + } + + .ms-Label { + color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// The original unstyled input element +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; + + &:focus:not(:disabled) { + + .ms-ChoiceField-field:after { + border-color: $ms-color-neutralSecondaryAlt; + } + } +} + +// The choicefield radio button or checkbox +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + + // The actual styled choicefield element - radio button by default + &:after { + content: ''; + display: inline-block; + border: 1px $ms-color-neutralTertiaryAlt solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; + } + + &:hover { + &:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } +} + +// A selected radio button +.ms-ChoiceField-input:checked { + + .ms-ChoiceField-field { + // Circle indicating a checked radio button + &:before { + background-color: $ms-color-neutralSecondary; + border-color: $ms-color-neutralSecondary; + color: $ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-white; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + background-color: $ms-color-black; + } + } + + &:hover:before { + background-color: $ms-color-neutralDark; + color: $ms-color-neutralDark; + } + } +} + +// Checkbox +.ms-ChoiceField-input[type="checkbox"] { + + .ms-ChoiceField-field:after { + border-radius: 0; + } +} + +// A selected checkbox +.ms-ChoiceField-input[type="checkbox"]:checked { + + .ms-ChoiceField-field { + &:before { + @include ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: $ms-font-size-s-plus; + top: 3px; + left: 3px; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-white; + border-color: transparent; + background-color: transparent; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-black; + border-color: transparent; + background-color: transparent; + } + } + } +} + + +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +// TODO: overrides that need to be removed. .ms-ChoiceField--image { $fieldMinWidth: 164px; diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index d7838daf4a5d8f..afafcab9073ea2 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -47,6 +47,8 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi } .ms-CommandBar { + @include ms-font-m; + position: relative; background-color: $ms-color-themeLighterAlt; height: $CommandBar-height; @@ -107,6 +109,9 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @mixin CommandBarItem-text { @include focus-border(2px); + font-family: inherit; + font-size: inherit; + position: relative; background: none; border: none; @@ -131,7 +136,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi &:hover, &.is-expanded { background-color: $ms-color-themeLight; - color: $ms-color-themePrimary; @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-white); diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index 0528798aec2a3c..c16caca5b174ff 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -151,7 +151,7 @@ export class CommandBar extends React.Component { (!!item.icon) && } - { (!!item.name) && { item.name } } + { (!!item.name) && { item.name } } { (item.items && item.items.length) ? ( ) : ( null ) } diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index a8185f91fded6f..fd66561a750c06 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/src/components/ContextualMenu/ContextualMenu.scss @@ -1,232 +1,89 @@ @import '../../common/common'; -@import '~office-ui-fabric/src/sass/Fabric.Animations'; -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +$ContextualMenu-background: $ms-color-white; +$ContextualMenu-itemHover: $ms-color-neutralLight; +$ContextualMenu-expandedItemBackground: $ms-color-themeLight; +$ContextualMenu-itemHeight: 40px; +$ContextualMenu-iconWidth: 24px; -// -// Office UI Fabric -// -------------------------------------------------- -// Contextual Menu styles - - -.ms-ContextualMenu-container { - position: relative; -} - -.ms-ContextualMenu.ms-FocusZone { - @include ms-font-m; - @include ms-u-normalize; - z-index: $ms-zIndex-ContextualMenu; - line-height: 0; - box-sizing: border-box; - position: relative; +.ms-ContextualMenu { + background-color: $ContextualMenu-background; + min-width: 180px; + max-width: 300px; } .ms-ContextualMenu-list { - background-color: $ms-color-white; list-style-type: none; - min-width: 180px; - max-height: 100vh; - padding: 0; margin: 0; - z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); - line-height: 0; + padding: 0; + max-height: 100vh; overflow-y: auto; - + line-height: 0; } .ms-ContextualMenu-item { - @include ms-u-borderBox; - position: relative; -} + @include ms-font-m; -// Modifier: Menu item Dividers -.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { - cursor: default; - display: block; - height: 1px; - margin: 4px 0; - background-color: $ms-color-neutralLight; position: relative; -} - -// Modifier: Menu item Headers -.ms-ContextualMenu-item.ms-ContextualMenu-item--header { - color: $ms-color-themePrimary; - font-size: $ms-font-size-s; - text-transform: uppercase; - height: 40px; - line-height: 40px; - padding: 0 18px; -} - -.ms-ContextualMenu-itemText.ms-font-m.ms-font-weight-regular { - display: inline-block; - @include margin-right(16px); - top: 0; + box-sizing: border-box; } .ms-ContextualMenu-link { @include focus-border(); - position: relative; - text-decoration: none; - color: $ms-color-neutralPrimary; - cursor: pointer; - display: block; - height: 40px; - padding: 0 18px; - white-space: nowrap; - box-sizing: border-box; - line-height: 0px; - - // Shorten the first and last items to maintain baseline alignment. - &:first-child, - &:last-child { - height: 39px; - } - - &:hover, - &:active { - background-color: $ms-color-neutralLight; - color: $ms-color-black; - } - - &:active { - border: 1px solid $ms-color-themePrimary; - } - - &.is-selected { - background-color: $ms-color-themeLight; - color: $ms-color-black; - font-family: $ms-font-family-semibold; - - &:hover { - background-color: $ms-color-themeLight; - } - } - - &.is-expanded { - background-color: $ms-color-themeLight; - color: $ms-color-black; - font-family: $ms-font-family-semibold; - - &:hover { - background-color: $ms-color-themeLight; - } - } - - &.is-disabled, &:disabled { - background-color: $ms-color-white; - color: $ms-color-neutralTertiary; - cursor: default; - pointer-events: none; - - &:active { - border-color: $ms-color-white; - } - } -} - -// Modifier: Contextual menu with submenu -.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { - position: absolute; - top: -1px; - @include left(178px); // Move the submenu to the left of the menu item that triggered it -} - -// Right chevron. -// Note: The .ms-ContextualMenu-caretRight class has been deprecated. -// Please use .ms-ContextualMenu-subMenuIcon. -.ms-ContextualMenu-subMenuIcon, -.ms-ContextualMenu-caretRight { - color: $ms-color-neutralSecondary; - font-size: $ms-font-size-m-plus + 1; - height: 39px; - line-height: 40px; - position: absolute; - top: 0; - @include right(7px); - z-index: 1; - pointer-events: none; -} - - -//== Modifier: Multi-select menu -// -.ms-ContextualMenu.ms-ContextualMenu--multiselect { - - // Align the header with the items - .ms-ContextualMenu-item.ms-ContextualMenu-item--header { - padding: 0 30px; - } - - .ms-ContextualMenu-link { - padding: 0 30px; - - // Multi-select checkmark - &.is-selected { - background-color: $ms-color-white; - - // Checkmark - &:after { - @include ms-Icon; - color: $ms-color-neutralPrimary; - content: '\e041'; - font-size: $ms-font-size-s; - height: 39px; - line-height: 40px; - position: absolute; - @include left(10px); - } - } - } -} - -.ms-ContextualMenu-link, -.ms-ContextualMenu-link:active { + font: inherit; background: none; border: none; + margin: 0; + padding: 0 8px; + min-width: 100%; + height: $ContextualMenu-itemHeight; + line-height: $ContextualMenu-itemHeight; display: block; - width: 100%; @include text-align(left); - @include ms-font-m; -} -.ms-ContextualMenu-chevronRight.ms-Icon { - top: 0; - position: absolute; - @include right(0); - vertical-align: middle; - line-height: 39px; - width: 34px; - text-align: center; -} - -.ms-ContextualMenu-icon { - @include padding-right(10px); + &:hover { + background: $ContextualMenu-itemHover; + } - &.no-icon { - @include padding-right(24px); + &.is-expanded, + &.is-expanded:hover { + background: $ContextualMenu-expandedItemBackground; } } -.ms-ContextualMenu-checkmark { - @include padding-right(10px); - &.not-selected { - @include padding-right(24px); - } +.ms-ContextualMenu-divider { + display: block; + height: 1px; + margin: 4px 0; + background-color: $dividerColor; + position: relative; } -.ms-FocusZone.ms-ContextualMenu.is-open { - width: auto; +.ms-ContextualMenu-checkmark { + display: inline-block; + min-height: 1px; + width: $ContextualMenu-iconWidth; + text-align: center; } -.ms-Callout-container.ms-ContextualMenu-Callout>.ms-Callout { - max-height: 100vh; +.ms-ContextualMenu-icon { + display: inline-block; + min-height: 1px; + width: $ContextualMenu-iconWidth; + text-align: center; } -.ExampleCard-example > .ms-ContextualMenu-container > .ms-ContextualMenu { - position: relative; +.ms-ContextualMenu-itemText { + padding: 0 4px; } +.ms-Icon.ms-ContextualMenu-submenuChevron { + position: absolute; + height: $ContextualMenu-itemHeight; + line-height: $ContextualMenu-itemHeight; + vertical-align: middle; + @include right(8px); + width: 16px; + text-align: center; +} \ No newline at end of file diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 5be84451b527e9..619f3490c26756 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -198,14 +198,14 @@ export class ContextualMenu extends React.Component this._focusZone = focusZone } > -