Pivot override styles

common/changes/office-ui-fabric-react/pivotOverrideStyles_2018-04-03-18-42.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Pivot: include className in props to override styles",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "naethell@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx

@@ -4,6 +4,8 @@ import {
   KeyCodes,
   css,
   getId,
+  getNativeProps,
+  divProperties,
   createRef
 } from '../../Utilities';
 import { CommandButton } from '../../Button';
@@ -101,8 +103,10 @@ export class PivotBase extends BaseComponent<IPivotProps, IPivotState> {
   }
 
   public render(): JSX.Element {
+    const divProps = getNativeProps(this.props, divProperties);
+
     return (
-      <div>
+      <div { ...divProps }>
         { this._renderPivotLinks() }
         { this._renderPivotItem() }
       </div>

packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx

@@ -14,4 +14,14 @@ describe('Pivot', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders Pivot correctly with custom className', () => {
+    const component = renderer.create(
+      <Pivot className='specialClassName'>
+        <PivotItem linkText='' className='specialClassName' />
+        <PivotItem linkText='' />
+      </Pivot>);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap

@@ -240,3 +240,248 @@ exports[`Pivot renders Pivot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Pivot renders Pivot correctly with custom className 1`] = `
+<div
+  className="specialClassName"
+>
+  <div
+    aria-describedby={undefined}
+    aria-labelledby={undefined}
+    className="ms-FocusZone"
+    data-focuszone-id="FocusZone9"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+    role="presentation"
+  >
+    <ul
+      className="ms-Pivot"
+      role="tablist"
+    >
+      <button
+        aria-describedby={null}
+        aria-label={undefined}
+        aria-labelledby={null}
+        aria-pressed={undefined}
+        aria-selected={true}
+        className=
+            ms-Button
+            ms-Pivot-link
+            is-selected
+            undefined
+            ms-Button--action
+            ms-Button--command
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-radius: 0px;
+              border: 1px solid transparent;
+              box-sizing: border-box;
+              color: #333333;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 40px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              vertical-align: top;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 0px;
+              content: "";
+              left: 0px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+              border: none;
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:hover {
+              color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:hover .ms-Button-icon {
+              color: #0078d4;
+            }
+            &:active {
+              color: #000000;
+            }
+            &:active .ms-Button-icon {
+              color: #004578;
+            }
+        data-is-focusable={true}
+        disabled={undefined}
+        id="Pivot8-Tab0"
+        name=""
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="tab"
+        type="button"
+      >
+        <div
+          className=
+              ms-Button-flexContainer
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: flex-start;
+              }
+        >
+          <span
+            className="ms-Pivot-link-content"
+          >
+            <span
+              className="ms-Pivot-text"
+            >
+
+
+            </span>
+          </span>
+        </div>
+      </button>
+      <button
+        aria-describedby={null}
+        aria-label={undefined}
+        aria-labelledby={null}
+        aria-pressed={undefined}
+        aria-selected={false}
+        className=
+            ms-Button
+            ms-Pivot-link
+            ms-Button--action
+            ms-Button--command
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-radius: 0px;
+              border: 1px solid transparent;
+              box-sizing: border-box;
+              color: #333333;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 40px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              vertical-align: top;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 0px;
+              content: "";
+              left: 0px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+              border: none;
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:hover {
+              color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:hover .ms-Button-icon {
+              color: #0078d4;
+            }
+            &:active {
+              color: #000000;
+            }
+            &:active .ms-Button-icon {
+              color: #004578;
+            }
+        data-is-focusable={true}
+        disabled={undefined}
+        id="Pivot8-Tab1"
+        name=""
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="tab"
+        type="button"
+      >
+        <div
+          className=
+              ms-Button-flexContainer
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: flex-start;
+              }
+        >
+          <span
+            className="ms-Pivot-link-content"
+          >
+            <span
+              className="ms-Pivot-text"
+            >
+
+
+            </span>
+          </span>
+        </div>
+      </button>
+    </ul>
+  </div>
+  <div
+    aria-labelledby="Pivot8-Tab0"
+    role="tabpanel"
+  >
+    <div
+      className="specialClassName"
+    />
+  </div>
+</div>
+`;