Part 3 of 3: DetailsList CSS-in-JS conversion

common/changes/office-ui-fabric-react/detailslist_2018-07-11-05-34.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: Complete CSS-in-JS conversion.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Check/Check.tsx

@@ -3,4 +3,6 @@ import { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types';
 import { CheckBase } from './Check.base';
 import { getStyles } from './Check.styles';
 
-export const Check = styled<ICheckProps, ICheckStyleProps, ICheckStyles>(CheckBase, getStyles);
+export const Check = styled<ICheckProps, ICheckStyleProps, ICheckStyles>(CheckBase, getStyles, undefined, {
+  scope: 'Check'
+});

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx → packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.ts

@@ -7,5 +7,7 @@ export { IDetailsHeaderProps };
 
 export const DetailsHeader = styled<IDetailsHeaderProps, IDetailsHeaderStyleProps, IDetailsHeaderStyles>(
   DetailsHeaderBase,
-  getStyles
+  getStyles,
+  undefined,
+  { scope: 'DetailsHeader' }
 );

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts

@@ -9,37 +9,87 @@ import { DetailsHeaderBase } from './DetailsHeader.base';
 import { IColumn, DetailsListLayoutMode, IColumnReorderOptions } from './DetailsList.types';
 
 export interface IDetailsHeader {
+  /** sets focus into the header */
   focus: () => boolean;
 }
 
 export interface IDetailsHeaderProps extends React.Props<DetailsHeaderBase> {
+  /** Theme from the Higher Order Component */
   theme?: ITheme;
+
+  /** Call to provide customized styling that will layer on top of the variant rules. */
   styles?: IStyleFunctionOrObject<IDetailsHeaderStyleProps, IDetailsHeaderStyles>;
+
+  /** Ref to the component itself */
   componentRef?: (component: IDetailsHeader | null) => void;
+
+  /** Column definitions */
   columns: IColumn[];
+
+  /** Selection utility */
   selection: ISelection;
+
+  /** Selection mode used for this component */
   selectionMode: SelectionMode;
+
+  /** Layout mode - fixedColumns or justified */
   layoutMode: DetailsListLayoutMode;
+
+  /** Callback for when column sizing has changed */
   onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;
+
+  /** Callback for when column is resized */
   onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void;
+
+  /** Callback for when column is automatically resized */
   onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;
+
+  /** Callback for when the column is clicked */
   onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
+
+  /** Callback for when the column needs to show a context menu */
   onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
+
+  /** Callback to render a tooltip for the column header */
   onRenderColumnHeaderTooltip?: IRenderFunction<ITooltipHostProps>;
+
+  /** Group nesting depth */
   groupNestingDepth?: number;
+
+  /** Indent width */
   indentWidth?: number;
+
+  /** Whether to collapse for all visibility */
   collapseAllVisibility?: CollapseAllVisibility;
+
+  /** Whether or not all is collapsed */
   isAllCollapsed?: boolean;
+
+  /** Callback for when collapse all is toggled */
   onToggleCollapseAll?: (isAllCollapsed: boolean) => void;
+
   /** ariaLabel for the entire header */
   ariaLabel?: string;
+
   /** ariaLabel for the header checkbox that selects or deselects everything */
   ariaLabelForSelectAllCheckbox?: string;
+
+  /** ariaLabel for the selection column */
   ariaLabelForSelectionColumn?: string;
+
+  /** Select all button visibility */
   selectAllVisibility?: SelectAllVisibility;
+
+  /** Viewport of the virtualized DetailsList */
   viewport?: IViewport;
+
+  /** Column reordering options */
   columnReorderOptions?: IColumnReorderOptions | null;
+
+  /** Minimum pixels to be moved before dragging is registered */
   minimumPixelsForDrag?: number;
+
+  /** Overriding class name */
   className?: string;
 }
 
@@ -72,11 +122,22 @@ export interface IDropHintDetails {
 
 export type IDetailsHeaderStyleProps = Required<Pick<IDetailsHeaderProps, 'theme'>> &
   Pick<IDetailsHeaderProps, 'className'> & {
+    /** Whether to hide select all checkbox */
     isSelectAllHidden?: boolean;
+
+    /** Whether the "select all" checkbox is checked */
     isAllSelected?: boolean;
+
+    /** Is column being resized */
     isResizingColumn?: boolean;
+
+    /** Are all columns collapsed */
     isAllCollapsed?: boolean;
+
+    /** Whether the header is sizing */
     isSizing?: boolean;
+
+    /** Whether checkbox is hidden  */
     isCheckboxHidden?: boolean;
   };
 

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

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import * as stylesImport from './DetailsList.scss';
 
 import {
   BaseComponent,
   KeyCodes,
   assign,
-  css,
   elementContains,
   getRTLSafeKeyCode,
   IRenderFunction,
-  createRef
+  createRef,
+  classNamesFunction
 } from '../../Utilities';
 import {
   CheckboxVisibility,
@@ -18,7 +17,9 @@ import {
   DetailsListLayoutMode,
   IColumn,
   IDetailsList,
-  IDetailsListProps
+  IDetailsListProps,
+  IDetailsListStyles,
+  IDetailsListStyleProps
 } from '../DetailsList/DetailsList.types';
 import { DetailsHeader } from '../DetailsList/DetailsHeader';
 import { IDetailsHeader, SelectAllVisibility, IDetailsHeaderProps } from '../DetailsList/DetailsHeader.types';
@@ -41,7 +42,7 @@ import { IList, List, IListProps, ScrollToMode } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';
 
-const styles: any = stylesImport;
+export const getClassNames = classNamesFunction<IDetailsListStyleProps, IDetailsListStyles>();
 
 export interface IDetailsListState {
   focusedItemIndex: number;
@@ -67,7 +68,7 @@ const SHIMMER_INITIAL_ITEMS = 10;
 const SHIMMER_ITEMS = new Array(SHIMMER_INITIAL_ITEMS);
 
 @withViewport
-export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListState> implements IDetailsList {
+export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsListState> implements IDetailsList {
   public static defaultProps = {
     layoutMode: DetailsListLayoutMode.justified,
     selectionMode: SelectionMode.multiple,
@@ -305,7 +306,9 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       viewport,
       columnReorderOptions,
       minimumPixelsForDrag,
-      getGroupHeight
+      getGroupHeight,
+      styles,
+      theme
     } = this.props;
     const { adjustedColumns, isCollapsed, isSizing, isSomeGroupExpanded } = this.state;
     const { _selection: selection, _dragDropHelper: dragDropHelper } = this;
@@ -339,20 +342,20 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
     const rowCount = (isHeaderVisible ? 1 : 0) + GetGroupCount(groups) + (items ? items.length : 0);
 
+    const classNames = getClassNames(styles, {
+      theme: theme!,
+      compact,
+      isFixed: layoutMode === DetailsListLayoutMode.fixedColumns,
+      isHorizontalConstrained: constrainMode === ConstrainMode.horizontalConstrained,
+      className
+    });
+
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
       // with JAWS.
       <div
         ref={this._root}
-        className={css(
-          'ms-DetailsList',
-          styles.root,
-          className,
-          layoutMode === DetailsListLayoutMode.fixedColumns && 'is-fixed',
-          constrainMode === ConstrainMode.horizontalConstrained &&
-            'is-horizontalConstrained ' + styles.rootIsHorizontalConstrained,
-          !!compact && 'ms-DetailsList--Compact ' + styles.rootCompact
-        )}
+        className={classNames.root}
         data-automationid="DetailsList"
         data-is-scrollable="false"
         aria-label={ariaLabel}
@@ -401,7 +404,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
           <div onKeyDown={this._onContentKeyDown} role="presentation">
             <FocusZone
               componentRef={this._focusZone}
-              className={styles.focusZone}
+              className={classNames.focusZone}
               direction={FocusZoneDirection.vertical}
               isInnerZoneKeystroke={isRightArrow}
               onActiveElementChanged={this._onActiveRowChanged}

packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.styles.ts

@@ -0,0 +1,66 @@
+import { IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types';
+import { getGlobalClassNames, FontSizes } from '../../Styling';
+
+const GlobalClassNames = {
+  root: 'ms-DetailsList',
+  compact: 'ms-DetailsList--Compact',
+  isFixed: 'is-fixed',
+  isHorizontalConstrained: 'is-horizontalConstrained',
+  listCell: 'ms-List-cell'
+};
+
+export const getStyles = (props: IDetailsListStyleProps): IDetailsListStyles => {
+  const { theme, className, isHorizontalConstrained, compact, isFixed } = props;
+  const { semanticColors } = theme;
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  return {
+    root: [
+      classNames.root,
+      {
+        position: 'relative',
+        fontSize: FontSizes.small,
+        background: semanticColors.listBackground,
+        color: semanticColors.listText,
+        selectors: {
+          [`& .${classNames.listCell}`]: {
+            minHeight: 38,
+            wordBreak: 'break-word'
+          }
+        }
+      },
+
+      isFixed && [classNames.isFixed],
+
+      compact && [
+        classNames.compact,
+        {
+          selectors: {
+            [`.${classNames.listCell}`]: {
+              minHeight: 32
+            }
+          }
+        }
+      ],
+
+      isHorizontalConstrained && [
+        classNames.isHorizontalConstrained,
+        {
+          overflowX: 'auto',
+          overflowY: 'visible',
+          WebkitOverflowScrolling: 'touch'
+        }
+      ],
+
+      className
+    ],
+
+    focusZone: [
+      {
+        display: 'inline-block',
+        minWidth: '100%',
+        minHeight: 1
+      }
+    ]
+  };
+};