JS Site bug fixes (OfficeDev#269)

* Fix #296007 Fabric JS Website Bug: Table - Selected table variant is not selectable * #295995 Fabric JS Website Bug: Simplify OrgChart HTML * #295973 Fabric JS Website Bug: copyright year * #296000 Fabric JS Website Bug: Persona SM variant has wrong html * #295963 Fabric JS Website Bug: Hovering over tab labels moves other labels * #295998 Fabric JS Website Bug: CommandBar - Text box is on top of header nav #296002 Fabric JS Website Bug: SearchBox z-index issues #295990 Fabric JS Website Bug: Copyright banner in the HTML * #295961 Fabric JS Website Bug: ChoiceFieldGroup could link to Fabric React ChoiceGroup * #295975 Fabric JS Website Bug: [Safari iOS] Cannot scroll leftnav/component list * #296003 Fabric JS Website Bug: [Safari iOS] Tapping "light dismiss area" does not dismiss left nav * #295992 Fabric JS Website Bug: Getting started page - text change #296008 Fabric JS Website Bug: Persona initials variant needs to be capitalized * #295964 Fabric JS Website Bug: In page navigation for component pages doesn't work in Firefox * #295994 Fabric JS Website Bug: Text cursor too long in textbox in CommandBar * #295965 Fabric JS Website Bug: Privacy link broken ? * #295988 Fabric JS Website Bug: Getting started code change * Remove scroll on date picker, #288293 Fabric JS Website Bug: Date component renders outside the page * #295968 Fabric JS Website Bug: Hero Button variant is displayed incorrectly in Firefox * Fix line height for table data * #295974 Fabric JS Website Bug: too many scrollbars on choicefieldgroup * Move page header transition * Remove whitespace from button.scss, simplify selector in component page * Remove jquery scrolling, fix z-indexes
razvan-moldovan · Jan 12, 2017 · c9a4e40 · c9a4e40
1 parent cb652eb
commit c9a4e40
Show file tree

Hide file tree

Showing 16 changed files with 85 additions and 84 deletions.
diff --git a/lib/scrollTo.js b/lib/scrollTo.js
diff --git 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
@@ -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
@@ -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
@@ -1,6 +1,8 @@
 var data = {
    componentName: "ChoiceFieldGroup",
    overview: "<p>Used to indicate a single choice from multiple options.</p>",
+   availableReact: true,
+   reactComponent: 'ChoiceGroup',
    variants: [
       {
          name: "Default ChoiceFieldGroup",

diff --git a/src/documentation/pages/Components/ComponentPageTmpl.hbs b/src/documentation/pages/Components/ComponentPageTmpl.hbs
@@ -4,16 +4,16 @@
       <h1 id="{{pageInfo.componentName}}" class="pageTitle">{{pageInfo.componentName}}</h1>
         <nav class="pageNav" aria-label="In page navigation">
           <ul>
-            <li><a href="#" data-title="Overview">Overview</a></li>
-            <li><a href="#" data-title="Using">Using this Component</a></li>
+            <li><a href="#" data-title="Overview" data-sectionname="Overview">Overview</a></li>
+            <li><a href="#" data-title="Using" data-sectionname="Using this Component">Using this Component</a></li>
             {{#if pageInfo.variants}}
-            <li><a href="#" data-title="Variants">Variants</a></li>
+            <li><a href="#" data-title="Variants" data-sectionname="Variants">Variants</a></li>
             {{/if}}
             {{#if pageInfo.states}}
-            <li><a href="#" data-title="States">States</a></li>
+            <li><a href="#" data-title="States" data-sectionname="States">States</a></li>
             {{/if}}
             {{#if pageInfo.methods}}
-            <li><a href="#" data-title="Methods">Methods</a></li>
+            <li><a href="#" data-title="Methods" data-sectionname="Methods">Methods</a></li>
             {{/if}}
           </ul>
         </nav>
@@ -31,7 +31,12 @@
           </div>
           {{#if pageInfo.availableReact}}
           <div class="ComponentPage-related">
-            <span class="ComponentPage-relatedTitle">Also available in</span><a href="https://dev.office.com/fabric#/components/{{toLowerCase pageInfo.componentName}}">Fabric React</a>
+            <span class="ComponentPage-relatedTitle">Also available in</span>
+            {{#if pageInfo.reactComponent}}
+            <a href="https://dev.office.com/fabric#/components/{{toLowerCase pageInfo.reactComponent}}">Fabric React</a>
+            {{else}}
+            <a href="https://dev.office.com/fabric#/components/{{toLowerCase pageInfo.componentName}}">Fabric React</a>
+            {{/if}}
           </div>
           {{/if}}
         </div>
@@ -115,7 +120,7 @@
       {{#if pageInfo.states}}
       <div class="ComponentPage-statesSection">
         <h2 class="ComponentPage-subHeading ComponentPage-statesTitle" id="States">States</h2>
-         <table class="ms-Table">
+         <table class="ms-Table ms-TableData">
             <thead>
               <tr>
                 <th>State</th>
@@ -142,7 +147,7 @@
       {{#if pageInfo.methods}}
       <div class="ComponentPage-methodsSection">
         <h2 class="ComponentPage-subHeading ComponentPage-methodsTitle" id="Methods">Methods</h2>
-        <table class="ms-Table">
+        <table class="ms-Table ms-TableData">
           <thead>
             <tr>
               <th>Name</th>
@@ -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
@@ -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
@@ -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
@@ -28,24 +28,35 @@
       <li>
         <p>Add the appropriate &lt;script&gt; tag to your page below the references to Fabric's JavaScript to instantiate, for example, all the Button components on the page:
         </p>
+        <button class="ms-Button ms-Button--primary AlertExamples">
+          <span class="ms-Button-label">New User</span>
+        </button>
+        <button class="ms-Button ms-Button--primary AlertExamples">
+          <span class="ms-Button-label">New User</span>
+        </button>
+        <button class="ms-Button ms-Button--primary AlertExamples">
+          <span class="ms-Button-label">New User</span>
+        </button>
         {{codeBlock
 '<script type="text/javascript">
-var ButtonElements = document.querySelectorAll(".ms-Button");
+var ButtonElements = document.querySelectorAll(".ms-Button.AlertExamples");
 for(var i = 0; i < ButtonElements.length; i++) {
   new fabric["Button"](ButtonElements[i], function() {
-    // Insert Event Here
+    alert("You clicked a New User button");
   });
 }
 </script>' 'javascript' 'isLightTheme'}}
         <p>Or, for example add the appropriate &lt;script&gt; tag to your page to instantiate a single Button component on the page</p>
+        <button class="ms-Button ms-Button--primary AlertExample">
+          <span class="ms-Button-label">Create Account</span>
+        </button>
         {{codeBlock
 '<script type="text/javascript">
-var ButtonComponent = document.querySelector(".ms-Button");
+var ButtonComponent = document.querySelector(".ms-Button.AlertExample");
 new fabric["Button"](ButtonComponent, function() {
-  // Insert Event Here
+  alert("You clicked the Create Account button");
 });
 </script>' 'javascript' 'isLightTheme'}}
-        <p>Fabric’s JavaScript is lightweight and simple. You can extend, gut, or use what’s included as-is.</p>
       </li>
       <li>
         <p>You can also reference styles from Fabric Core, such as the type styles:</p>
@@ -60,4 +71,17 @@ new fabric["Button"](ButtonComponent, function() {
     <h3>Need a component Fabric JS doesn’t have?</h3>
     <p>Check the <a href="https://trello.com/b/wq7oIK87/office-ui-fabric-js-requests">Fabric JS Trello board</a> and vote up the request so we can track it. If you don’t see an existing card, please <a href="https://github.com/OfficeDev/office-ui-fabric-js/issues/new">file an issue in the repository</a> and we’ll add the card for you.</p>
   </div>
-</div>
+</div>
+<script type="text/javascript">
+var ButtonElements = document.querySelectorAll(".ms-Button.AlertExamples");
+for(var i = 0; i < ButtonElements.length; i++) {
+  new fabric["Button"](ButtonElements[i], function() {
+    alert("You clicked a New User button");
+  });
+}
+
+var ButtonComponent = document.querySelector(".ms-Button.AlertExample");
+new fabric["Button"](ButtonComponent, function() {
+  alert("You clicked the Create Account button");
+});
+</script>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;