microsoft · oengusmacinog-zz · Mar 1, 2018 · Feb 22, 2018 · Feb 22, 2018 · Feb 22, 2018
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Converting ResizeGroup SCSS to MergeStyles step 2 - style converstion",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
@@ -2,10 +2,21 @@
 
 exports[`CommandBar renders commands correctly 1`] = `
 <div
-  className="ms-ResizeGroup TestClassName"
+  className=
+      ms-ResizeGroup
+      TestClassName
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    className=
+        ms-ResizeGroup--measured
+        {
+          position: fixed;
+          visibility: hidden;
+        }
   >
     <div
       className=

@@ -0,0 +1,65 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+
+/**
+ * Duplicated enzyme's ShallowRendererProps
+ *
+ * @internal
+ */
+export interface IShallowRendererProps {
+  lifecycleExperimental?: boolean;
+  disableLifecycleMethods?: boolean;
+}
+
+/**
+ * ShallowUntilTarget Interface
+ *
+ * @internal
+ */
+export interface IShallowUntilTarget {
+  maxTries: number;
+  shallowOptions: IShallowRendererProps;
+}
+
+/**
+ * An extention of enzyme's shallow function which will fail to work
+ * with decorated components and/or components using the styled() function.
+ * This function allows you to pass a 'target' component (e.g. ComponentBase)
+ * and keep running shallow on each child component till a match is found.
+ *
+ * @public
+ */
+export function shallowUntilTarget<P, S>(
+  componentInstance: React.ReactElement<P>,
+  TargetComponent: string,
+  options: IShallowUntilTarget = {
+    maxTries: 10,
+    shallowOptions: {}
+  }
+): ShallowWrapper {
+  const { maxTries, shallowOptions } = options;
+
+  let root = shallow<P, S>(componentInstance, shallowOptions);
+
+  if (typeof root.type() === 'string' || root.type().toString().includes(TargetComponent)) {
+    // Default shallow()
+    // If type() is a string then it's a DOM Node.
+    // If it were wrapped, it would be a React component.
+    return root;
+  }
+
+  for (let tries = 1; tries <= maxTries; tries++) {
+    // Check for target as a string to avoid conflicts
+    // with decoratored components name
+    if (root.type().toString().includes(TargetComponent)) {
+      // Now that we found the target component, render it.
+      return root.first().shallow(shallowOptions);
+    }
+    // Unwrap the next component in the hierarchy.
+    root = root.first().shallow(shallowOptions);
+  }
+
+  throw new Error(
+    `Could not find ${TargetComponent} in React instance: ${componentInstance};
+    gave up after ${maxTries} tries`
+  );
+}
@@ -2,10 +2,20 @@
 
 exports[`Breadcrumb renders breadcumb correctly 1`] = `
 <div
-  className="ms-ResizeGroup"
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       aria-label={undefined}
@@ -146,10 +156,20 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
 
 exports[`Breadcrumb renders breadcumb correctly 2`] = `
 <div
-  className="ms-ResizeGroup"
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       aria-label={undefined}

@@ -2,13 +2,18 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import {
   BaseComponent,
+  classNamesFunction,
   css,
+  customizable,
   divProperties,
   getNativeProps,
   provideContext
 } from '../../Utilities';
-import { IResizeGroupProps } from './ResizeGroup.types';
-import * as styles from './ResizeGroup.scss';
+import {
+  IResizeGroupProps,
+  IResizeGroupStyles,
+  IResizeGroupStyleProps
+} from './ResizeGroup.types';
 
 const RESIZE_DELAY = 16;
 
@@ -284,6 +289,9 @@ const MeasuredContext = provideContext({
   return { isMeasured: true };
 });
 
+const getClassNames = classNamesFunction<IResizeGroupStyleProps, IResizeGroupStyles>();
+
+@customizable('ResizeGroup', ['theme'])
 export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGroupState> {
   private _nextResizeGroupStateProvider = getNextResizeGroupStateProvider();
   private _root: HTMLElement;
@@ -299,14 +307,18 @@ export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGro
   }
 
   public render() {
-    const { onRenderData, className } = this.props;
+    const { onRenderData, className, getStyles, theme } = this.props;
     const { dataToMeasure, renderedData } = this.state;
     const divProps = getNativeProps(this.props, divProperties, ['data']);
+    const classNames = getClassNames(getStyles!, { theme: theme!, className });
 
     return (
-      <div { ...divProps } className={ css('ms-ResizeGroup', className) } ref={ this._resolveRef('_root') }>
+      <div { ...divProps } className={ classNames.root } ref={ this._resolveRef('_root') }>
         { this._nextResizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(dataToMeasure) && (
-          <div className={ css(styles.measured) } ref={ this._resolveRef('_measured') }>
+          <div
+            style={ { position: 'fixed', visibility: 'hidden' } }
+            ref={ this._resolveRef('_measured') }
+          >
             <MeasuredContext>{ onRenderData(dataToMeasure) }</MeasuredContext>
           </div>
         ) }

@@ -18,11 +18,10 @@ export const getStyles = (
     root: [
       'ms-ResizeGroup',
       {
-        // Insert css properties
-
-      }
-    ],
-
-    // Insert className styles
+        display: 'block',
+        position: 'relative'
+      },
+      className
+    ]
   });
 };
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallowUntilTarget } from '../../common/shallowUntilTarget';
 
 import { ResizeGroup } from './ResizeGroup';
-import { ResizeGroupBase, IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup.base';
+import { IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup.base';
 import { IResizeGroupProps } from './ResizeGroup.types';
 import * as sinon from 'sinon';
 import * as renderer from 'react-test-renderer';
@@ -45,13 +45,13 @@ describe('ResizeGroup', () => {
     const renderedDataId = 'onRenderDataId';
     const onRenderData = (data: any) => <div id={ renderedDataId }> Rendered data: { data.content }</div >;
 
-    const wrapper = shallow<IResizeGroupProps, IResizeGroupState>(
-      <ResizeGroupBase
+    const wrapper = shallowUntilTarget<IResizeGroupProps, IResizeGroupState>(
+      <ResizeGroup
         data={ initialData }
         onReduceData={ onReduceScalingData }
         onRenderData={ onRenderData }
       />
-    );
+      , 'ResizeGroupBase');
 
     expect(wrapper.containsMatchingElement(onRenderData(initialData))).toEqual(true);
   });

@@ -2,10 +2,21 @@
 
 exports[`ResizeGroup renders the ResizeGroup correctly 1`] = `
 <div
-  className="ms-ResizeGroup TestClassName"
+  className=
+      ms-ResizeGroup
+      TestClassName
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       id="onRenderDataId"

@@ -1,2 +1,3 @@
 export * from './ResizeGroup';
+export * from './ResizeGroup.base'
 export * from './ResizeGroup.types';