ShimmeredDetailsList: modify some math logic (#5824)

* Fix some math plus adding a ratio instead of hard coded number. * Rush change log.
microsoft · Aug 9, 2018 · 9b74e78 · 9b74e78
1 parent cfcff98
commit 9b74e78
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/common/changes/office-ui-fabric-react/v-vibr-ShimmeredDetailsListFix_2018-08-06-22-41.json b/common/changes/office-ui-fabric-react/v-vibr-ShimmeredDetailsListFix_2018-08-06-22-41.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ShimmeredDetailsList: replace a hard coded multiplier with a ratio constant and modify some math logic.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-vibr@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
@@ -21,6 +21,7 @@ const getClassNames = classNamesFunction<IShimmeredDetailsListStyleProps, IShimm
 
 const SHIMMER_INITIAL_ITEMS = 10;
 const DEFAULT_SHIMMER_HEIGHT = 7;
+const SHIMMER_LINE_VS_CELL_WIDTH_RATIO = 0.95;
 
 // This values are matching values from ./DetailsRow.css
 const DEFAULT_ROW_HEIGHT = 42;
@@ -130,12 +131,15 @@ export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsLis
       } else {
         shimmerElements.push({
           type: ShimmerElementType.line,
-          width: column.calculatedWidth! - cellStyleProps.cellRightPadding * 3,
+          width: column.calculatedWidth! * SHIMMER_LINE_VS_CELL_WIDTH_RATIO,
           height: DEFAULT_SHIMMER_HEIGHT
         });
         shimmerElements.push({
           type: ShimmerElementType.gap,
-          width: cellStyleProps.cellRightPadding * 4,
+          width:
+            cellStyleProps.cellRightPadding +
+            (column.calculatedWidth! - column.calculatedWidth! * SHIMMER_LINE_VS_CELL_WIDTH_RATIO) +
+            (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),
           height: gapHeight
         });
       }