Merge branch 'master' into algemb/css_Nav

microsoft · Feb 23, 2017 · 27fb861 · 27fb861
2 parents 0a6fb68 + 1f5e8b8
commit 27fb861
Show file tree

Hide file tree

Showing 17 changed files with 218 additions and 95 deletions.
diff --git a/apps/fabric-examples/package.json b/apps/fabric-examples/package.json
@@ -39,7 +39,7 @@
     "highlight.js": "^9.6.0",
     "mocha": "~2.5.3",
     "office-ui-fabric-core": ">=5.0.0 <6.0.0",
-    "office-ui-fabric-react": ">=1.11.0 <2.0.0",
+    "office-ui-fabric-react": ">=1.12.0 <2.0.0",
     "react": ">=15.0.0 <16.0.0",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": ">=15.0.0 <16.0.0",

diff --git a/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx b/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx
@@ -20,6 +20,7 @@ export class DropdownBasicExample extends React.Component<any, any> {
           label='Basic uncontrolled example:'
           id='Basicdrop1'
           ariaLabel='Basic dropdown example'
+          onChanged={ (item) => this.setState({ selectedItem: item }) }
           options={
             [
               { key: 'A', text: 'Option a' },
@@ -75,4 +76,12 @@ export class DropdownBasicExample extends React.Component<any, any> {
     );
   }
 
+  public makeList(items) {
+    let list = [];
+    for (var i = 0; i < items; i++) {
+      list.push({ key: i, text: 'Option ' + i })
+    };
+    return list;
+  }
+
 }
diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json
@@ -55,7 +55,7 @@
     "json-loader": "^0.5.4",
     "load-themed-styles": "~1.1.0",
     "office-ui-fabric-core": "5.1.0",
-    "office-ui-fabric-react": "^1.11.0",
+    "office-ui-fabric-react": "^1.12.0",
     "@uifabric/utilities": ">=1.0.3 <2.0.0"
   }
 }
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
@@ -20,7 +20,7 @@
     "@types/chai": "^3.4.34",
     "@types/mocha": "^2.2.32",
     "fabric-examples": ">=1.0.0 <2.0.0",
-    "office-ui-fabric-react": ">=1.11.0 <2.0.0",
+    "office-ui-fabric-react": ">=1.12.0 <2.0.0",
     "mocha": "~2.5.3",
     "react": ">=15.0.0 <16.0.0",
     "react-dom": ">=15.0.0 <16.0.0"

diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
@@ -25,7 +25,7 @@
     "es6-promise": ">=3.2.1 <4.0.0",
     "immutability-helper": "^2.0.0",
     "office-ui-fabric-core": ">=5.0.1 <6.0.0",
-    "office-ui-fabric-react": ">=1.11.0 <2.0.0",
+    "office-ui-fabric-react": ">=1.12.0 <2.0.0",
     "react": ">=15.3.2 <16.0.0",
     "react-dom": ">=15.3.2 <16.0.0",
     "typescript": "^2.0.6"

diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json
@@ -29,7 +29,7 @@
     "gulp": "~3.9.1",
     "mocha": "~2.5.3",
     "office-ui-fabric-core": ">=5.0.0 <6.0.0",
-    "office-ui-fabric-react": ">=1.11.0 <2.0.0",
+    "office-ui-fabric-react": ">=1.12.0 <2.0.0",
     "react": ">=15.0.0 <16.0.0",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": ">=15.0.0 <16.0.0",

diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "office-ui-fabric-react",
   "entries": [
+    {
+      "version": "1.12.0",
+      "tag": "office-ui-fabric-react_v1.12.0",
+      "date": "Thu, 23 Feb 2017 04:11:45 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Micah Godbolt <micahgodbolt@gmail.com>",
+            "commit": "ba119691af45af153959e08f62c6e28f0f177162",
+            "comment": "Dropdown: Updated dropdown component to be composed of several onRender functions, and  for render container to use panel under medium breakpoint"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Manish Dahamiwal <mdhamiwal@gmail.com>",
+            "commit": "d3ec6e1d84331213194fc19b14dba655efc6bb25",
+            "comment": "TextField - Allow aria attributes override"
+          }
+        ]
+      }
+    },
     {
       "version": "1.11.0",
       "tag": "office-ui-fabric-react_v1.11.0",

diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Change Log - office-ui-fabric-react
 
-This log was last generated on Tue, 21 Feb 2017 16:15:42 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Feb 2017 04:11:45 GMT and should not be manually modified.
+
+## 1.12.0
+Thu, 23 Feb 2017 04:11:45 GMT
+
+### Minor changes
+
+- Dropdown: Updated dropdown component to be composed of several onRender functions, and  for render container to use panel under medium breakpoint
+
+### Patches
+
+- TextField - Allow aria attributes override
 
 ## 1.11.0
 Tue, 21 Feb 2017 16:15:42 GMT

diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts
@@ -1,5 +1,7 @@
 import { IRenderFunction } from '../../Utilities';
-export interface IDropdownProps {
+import { Dropdown } from './Dropdown';
+
+export interface IDropdownProps extends React.Props<Dropdown> {
   /**
    * Descriptive label for the Dropdown
    */
@@ -42,13 +44,28 @@ export interface IDropdownProps {
   onChanged?: (option: IDropdownOption, index?: number) => void;
 
   /**
-   * Optional custom renderer for the selected dropdown item
+   * Optional custom renderer for selected option displayed in input
    */
-  onRenderItem?: IRenderFunction<IDropdownOption>;
+  onRenderTitle?: IRenderFunction<IDropdownOption>;
+
+  /**
+    * Optional custom renderer for the dropdown container
+    */
+  onRenderContainer?: IRenderFunction<IDropdownProps>;
+
+  /**
+    * Optional custom renderer for the dropdown list
+    */
+  onRenderList?: IRenderFunction<IDropdownProps>;
 
   /**
    * Optional custom renderer for the dropdown options
    */
+  onRenderItem?: IRenderFunction<IDropdownOption>;
+
+  /**
+   * Optional custom renderer for the dropdown option content
+   */
   onRenderOption?: IRenderFunction<IDropdownOption>;
 
   /**

diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
@@ -152,48 +152,33 @@ $DropDown-item-height: 36px;
     text-overflow: ellipsis;
   }
 
-  // Container for the dropdown items, displayed as a panel on small screens.
-  .ms-Dropdown-items {
-    @include ms-u-normalize;
-    @include drop-shadow;
-    background-color: $ms-color-white;
-    list-style-type: none;
-    width: 100%;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    max-width: 100%;
+  .ms-Dropdown-callout {
     box-shadow: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
     border: 1px solid $ms-color-neutralLight;
-    user-select: none;
+  }
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: none;
+  .ms-Dropdown-panel {
+    // Force drop shadow even under medium breakpoint
+    .ms-Panel-main {
+      @include drop-shadow(-30px, 0px, 30px, -30px, .2);
     }
-
-    @media screen and (-ms-high-contrast: active) {
-      border: 1px solid $ms-color-white;
-    }
-
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border: 1px solid $ms-color-black;
+    // Remove padding as items have their own padding and bg
+    .ms-Panel-contentInner {
+      padding: 0 0 20px
     }
   }
 
+  // Container for the dropdown items, displayed as a panel on small screens.
   .ms-Dropdown-item {
+    background: transparent;
     box-sizing: border-box;
     cursor: pointer;
     display: block;
+    width: 100%;
+    text-align: left;
     min-height: $DropDown-item-height;
     line-height: 20px;
-    padding: 6px 12px;
+    padding: 5px 16px;
     position: relative;
     border: 1px solid transparent;
     word-wrap: break-word;
@@ -247,4 +232,4 @@ $DropDown-item-height: 36px;
 
     @include highContrastListItemState;
   }
-}
+}