diff --git a/lib/scrollTo.js b/lib/scrollTo.js new file mode 100644 index 00000000..faa206ae --- /dev/null +++ b/lib/scrollTo.js @@ -0,0 +1 @@ +function scrollIt(e,t,o){function n(){document.documentElement.scrollTop+=1;const e=0!==document.documentElement.scrollTop?document.documentElement:document.body;return document.documentElement.scrollTop-=1,e}function c(){const e=Date.now(),o=Math.min(1,(e-d)/t),n=o*(2-o);m.scrollTop=n*(s-l)+l,m.scrollTop!==s&&requestAnimationFrame(c)}const m=n(),l=m.scrollTop,d=Date.now(),u=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),i=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName("body")[0].clientHeight,s=i>u-e?u-i:e;c()} \ No newline at end of file diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 1462f236..414e931c 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -133,16 +133,15 @@ align-items: center; background-color: transparent; border: 0; - display: flex; padding: 0; + position: relative; .ms-Button-icon { color: $ms-color-themePrimary; display: inline-block; font-size: $ms-font-size-s; margin-right: 4px; - position: relative; - top: 1px; + padding-top: 5px; text-align: center; .ms-Icon { @@ -161,6 +160,7 @@ font-weight: $ms-font-weight-light; position: relative; text-decoration: none; + vertical-align: top; } &:hover, diff --git a/src/components/DatePicker/Jquery.DatePicker.ts b/src/components/DatePicker/Jquery.DatePicker.ts index d85f6a6d..e7012d9d 100644 --- a/src/components/DatePicker/Jquery.DatePicker.ts +++ b/src/components/DatePicker/Jquery.DatePicker.ts @@ -78,9 +78,6 @@ namespace fabric { $picker.on({ render: () => { this.updateCustomView($datePicker); - }, - open: () => { - this.scrollUp($datePicker); } }); } @@ -273,13 +270,6 @@ namespace fabric { $yearPicker.find(".ms-DatePicker-yearOption[data-year='" + $picker.get("highlight").year + "']").addClass("is-highlighted"); } - /** Scroll the page up so that the field the date picker is attached to is at the top. */ - public scrollUp($datePicker) { - $("html, body").animate({ - scrollTop: $datePicker.offset().top - }, 367); - } - private setDateAttributes(dateArr: any): any[] { let newYear = dateArr[0], newMonth = dateArr[1], diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index 5c51dfc5..a459158d 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/src/components/SearchBox/SearchBox.scss @@ -149,7 +149,6 @@ $SearchBox-command-color: #F4F4F4; .ms-SearchBox-field, .ms-SearchBox-label { height: $SearchBox-commandbarHeight; - line-height: $SearchBox-commandbarHeight; } .ms-SearchBox-field { diff --git a/src/documentation/pages/Components/ChoiceFieldGroup/ChoiceFieldGroup.js b/src/documentation/pages/Components/ChoiceFieldGroup/ChoiceFieldGroup.js index ecb1ce58..d87a0d91 100644 --- a/src/documentation/pages/Components/ChoiceFieldGroup/ChoiceFieldGroup.js +++ b/src/documentation/pages/Components/ChoiceFieldGroup/ChoiceFieldGroup.js @@ -1,6 +1,8 @@ var data = { componentName: "ChoiceFieldGroup", overview: "

Used to indicate a single choice from multiple options.

", + availableReact: true, + reactComponent: 'ChoiceGroup', variants: [ { name: "Default ChoiceFieldGroup", diff --git a/src/documentation/pages/Components/ComponentPageTmpl.hbs b/src/documentation/pages/Components/ComponentPageTmpl.hbs index 469639ad..e54502e1 100644 --- a/src/documentation/pages/Components/ComponentPageTmpl.hbs +++ b/src/documentation/pages/Components/ComponentPageTmpl.hbs @@ -4,16 +4,16 @@

{{pageInfo.componentName}}

@@ -31,7 +31,12 @@ {{#if pageInfo.availableReact}}
- Also available inFabric React + Also available in + {{#if pageInfo.reactComponent}} + Fabric React + {{else}} + Fabric React + {{/if}}
{{/if}} @@ -115,7 +120,7 @@ {{#if pageInfo.states}}

States

- +
@@ -142,7 +147,7 @@ {{#if pageInfo.methods}}

Methods

-
State
+
@@ -185,13 +190,13 @@ } // Toggle code buttons - let codeButtons = document.getElementsByClassName('ExampleCard-codeButton'); - for (let i = 0; i < codeButtons.length; i++) { + var codeButtons = document.getElementsByClassName('ExampleCard-codeButton'); + for (var i = 0; i < codeButtons.length; i++) { codeButtons[i].addEventListener('click', toggleCode); } function toggleCode(e) { - let container = findAncestor(e.target, 'ExampleCard'); + var container = findAncestor(e.target, 'ExampleCard'); container.classList.contains('is-codeVisible') ? container.classList.remove('is-codeVisible') : container.classList.add('is-codeVisible'); @@ -203,19 +208,17 @@ pageNavLinks[i].addEventListener("click", scrollToLink) } - const CONTAINER = $('body'); function scrollToLink(e) { e.preventDefault(); var targetSection = e.target.getAttribute("data-title"); - var padding = (window.innerWidth < MOBILE_BP) ? 230 : 180; - var scrollTo = $('#' + targetSection); + var padding = (window.innerWidth < MOBILE_BP) ? 130 : 150; + var scrollToElem = document.querySelector('#' + targetSection); + var docElem = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? document.documentElement : document.body; - CONTAINER.animate({ - scrollTop: scrollTo.offset().top - CONTAINER.offset().top - padding - }); + scrollIt(scrollToElem.offsetTop - padding, 700, 'easeInQuad'); } - var TableElements = document.querySelectorAll(".ms-Table"); + var TableElements = document.querySelectorAll(".ms-TableData"); for (var i = 0; i < TableElements.length; i++) { new fabric['Table'](TableElements[i]); } diff --git a/src/documentation/pages/Components/OrgChart/examples/OrgChartExampleModel.js b/src/documentation/pages/Components/OrgChart/examples/OrgChartExampleModel.js index 795d0a1a..14d3da31 100644 --- a/src/documentation/pages/Components/OrgChart/examples/OrgChartExampleModel.js +++ b/src/documentation/pages/Components/OrgChart/examples/OrgChartExampleModel.js @@ -51,36 +51,6 @@ var OrgChartModels = { "primaryText": "Harvey Wallin", "secondaryText": "Public Relations" } - }, - { - "component": "Persona", - "props": { - "initials": "RM", - "initialsColor": "blue", - "image": "../persona/Persona.Person2.png", - "primaryText": "Marcus Lauer", - "secondaryText": "Technical Support" - } - }, - { - "component": "Persona", - "props": { - "initials": "RM", - "initialsColor": "blue", - "image": "../persona/Persona.Person2.png", - "primaryText": "Marcel Groce", - "secondaryText": "Delivery" - } - }, - { - "component": "Persona", - "props": { - "initials": "RM", - "initialsColor": "blue", - "image": "../persona/Persona.Person2.png", - "primaryText": "Jessica Fischer", - "secondaryText": "Marketing" - } } ] } diff --git a/src/documentation/pages/Components/Persona/Persona.js b/src/documentation/pages/Components/Persona/Persona.js index 2d5fa56f..d84215c5 100644 --- a/src/documentation/pages/Components/Persona/Persona.js +++ b/src/documentation/pages/Components/Persona/Persona.js @@ -16,7 +16,7 @@ var data = { { name: "Small Persona", templateFile: "PersonaExample", - model: "PersonaExtraSmallExampleModel" + model: "PersonaSmallExampleModel" }, { name: "Default Persona", @@ -34,7 +34,7 @@ var data = { model: "PersonaExtraLargeExampleModel" }, { - name: "initials Persona", + name: "Initials Persona", templateFile: "PersonaExample", model: "PersonaInitialsExampleModel" }, diff --git a/src/documentation/pages/GetStarted/GetStarted.hbs b/src/documentation/pages/GetStarted/GetStarted.hbs index fb5ba650..26fa9965 100644 --- a/src/documentation/pages/GetStarted/GetStarted.hbs +++ b/src/documentation/pages/GetStarted/GetStarted.hbs @@ -28,24 +28,35 @@

  • Add the appropriate <script> tag to your page below the references to Fabric's JavaScript to instantiate, for example, all the Button components on the page:

    + + + {{codeBlock '' 'javascript' 'isLightTheme'}}

    Or, for example add the appropriate <script> tag to your page to instantiate a single Button component on the page

    + {{codeBlock '' 'javascript' 'isLightTheme'}} -

    Fabric’s JavaScript is lightweight and simple. You can extend, gut, or use what’s included as-is.

  • You can also reference styles from Fabric Core, such as the type styles:

    @@ -60,4 +71,17 @@ new fabric["Button"](ButtonComponent, function() {

    Need a component Fabric JS doesn’t have?

    Check the Fabric JS Trello board and vote up the request so we can track it. If you don’t see an existing card, please file an issue in the repository and we’ll add the card for you.

    - \ No newline at end of file + + \ No newline at end of file diff --git a/src/documentation/sass/AppContainer.scss b/src/documentation/sass/AppContainer.scss index 0f0e3b93..2f6dad59 100644 --- a/src/documentation/sass/AppContainer.scss +++ b/src/documentation/sass/AppContainer.scss @@ -33,7 +33,7 @@ body { left: 0; position: fixed; right: 0; - z-index: 600; + z-index: $ms-zIndex-5; .menuButton { background: transparent; @@ -69,6 +69,7 @@ body { @include transition-property(left); width: $Nav-width; min-width: $Nav-width; // @TODO: Figure out why width by itself isn't working + overflow: auto; } .App-content { @@ -126,7 +127,7 @@ body { @include left($Nav-width); @include right(0); top: 0; - z-index: 1; + z-index: $ms-zIndex-1; } .App-nav { diff --git a/src/documentation/sass/ComponentPage.scss b/src/documentation/sass/ComponentPage.scss index a18c676c..3666c62d 100644 --- a/src/documentation/sass/ComponentPage.scss +++ b/src/documentation/sass/ComponentPage.scss @@ -199,10 +199,16 @@ $dontColor: #A61E22; .ComponentPage-statesSection, .ComponentPage-methodsSection { - overflow: scroll; + overflow: auto; } +.ms-TableData { + tbody td { + line-height: 2; + } +} + .ms-Table { .tableMinWidth { div { diff --git a/src/documentation/sass/ExampleCard.scss b/src/documentation/sass/ExampleCard.scss index 4a72a86f..1dfacda9 100644 --- a/src/documentation/sass/ExampleCard.scss +++ b/src/documentation/sass/ExampleCard.scss @@ -88,7 +88,7 @@ margin: 0; max-height: 0; padding: 0; - overflow: auto; + overflow: hidden; transition: all $ms-duration3 $ms-ease1; } @@ -107,6 +107,7 @@ max-height: 480px; border: 1px solid $ms-color-neutralDark; border-top: 0; + overflow: auto; } .ExampleCard-codeButton { diff --git a/src/documentation/sass/Footer.scss b/src/documentation/sass/Footer.scss index 8fd0f8e7..ca7844f1 100644 --- a/src/documentation/sass/Footer.scss +++ b/src/documentation/sass/Footer.scss @@ -6,7 +6,7 @@ font-size: $ms-font-size-m; padding: 32px 20px; position: relative; - z-index: 6; + z-index: $ms-zIndex-4; ul, li { list-style: none; diff --git a/src/documentation/sass/Header.scss b/src/documentation/sass/Header.scss index 415436b5..6b321217 100644 --- a/src/documentation/sass/Header.scss +++ b/src/documentation/sass/Header.scss @@ -11,7 +11,7 @@ $od-Header-bannerWidth: 1300px; right: 0; top: 0; width: 100%; - z-index: 9; + z-index: $ms-zIndex-5; box-sizing: border-box; } diff --git a/src/documentation/sass/PageHeader.scss b/src/documentation/sass/PageHeader.scss index 19c781e4..70abf815 100644 --- a/src/documentation/sass/PageHeader.scss +++ b/src/documentation/sass/PageHeader.scss @@ -2,7 +2,7 @@ .pageHeader { @include fullWidth(); position: relative; - z-index: 6; + z-index: $ms-zIndex-4; } .content { @@ -26,7 +26,6 @@ font-weight: $ms-font-weight-light; line-height: 1; padding: 40px 0; - transition: font-size $ms-duration1 $ms-ease1; } .pageNav { @@ -66,6 +65,7 @@ font-size: $font-size-big; font-weight: $ms-font-weight-regular; padding-top: 32px; + transition: font-size $ms-duration1 $ms-ease1; } } } @@ -110,7 +110,7 @@ // Make room for the heavier text of the selected state &::after { color: transparent; - content: attr(data-title); + content: attr(data-sectionname); display: block; font-weight: bold; height: 1px; diff --git a/src/documentation/templates/samples-index.hbs b/src/documentation/templates/samples-index.hbs index 5360fed0..f6673afe 100644 --- a/src/documentation/templates/samples-index.hbs +++ b/src/documentation/templates/samples-index.hbs @@ -1,4 +1,3 @@ - @@ -10,8 +9,9 @@ - + {{#if pageInfo.isDatePicker}} + {{/if}} @@ -302,13 +302,13 @@
    Microsoft logo -
    © 2016 Microsoft
    +
    © Microsoft
    @@ -316,6 +316,7 @@
    • Name