diff --git a/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json new file mode 100644 index 00000000000000..a4d1e8665a296c --- /dev/null +++ b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "DetailsList: Prevent override of column cell border while dragging", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "arkgupta@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts index b4d725fd5bfd92..bcc3fa47a4a92f 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts @@ -43,7 +43,6 @@ export const getCellStyles = (props: { theme: ITheme; cellStyleProps?: ICellStyl display: 'inline-block', boxSizing: 'border-box', padding: `0 ${cellStyleProps.cellRightPadding}px 0 ${cellStyleProps.cellLeftPadding}px`, - border: 'none', lineHeight: 'inherit', margin: '0', height: values.rowHeight, @@ -151,7 +150,8 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles padding: 0, margin: 0, display: 'inline-flex', - alignItems: 'center' + alignItems: 'center', + border: 'none' }, isAllSelected && { opacity: 1 @@ -163,7 +163,8 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles { paddingLeft: '8px', paddingRight: '8px', - width: '36px' + width: '36px', + border: 'none' } ], diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap index 54e5e144ef222b..c9571115421a51 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap @@ -266,7 +266,6 @@ exports[`DetailsHeader can render 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -456,7 +455,6 @@ exports[`DetailsHeader can render 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -668,7 +666,6 @@ exports[`DetailsHeader can render 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1138,7 +1135,6 @@ exports[`DetailsHeader renders accessible labels 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1328,7 +1324,6 @@ exports[`DetailsHeader renders accessible labels 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1565,7 +1560,6 @@ exports[`DetailsHeader renders accessible labels 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap index 6007250ecd2364..c07c297d45b184 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap @@ -312,7 +312,6 @@ exports[`DetailsList renders List correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -894,7 +893,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1050,7 +1048,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1206,7 +1203,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1362,7 +1358,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1518,7 +1513,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2068,7 +2062,6 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2651,7 +2644,6 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2840,7 +2832,6 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3029,7 +3020,6 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3611,7 +3601,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3770,7 +3759,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3929,7 +3917,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -4088,7 +4075,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -4247,7 +4233,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -4655,7 +4640,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap index 6ef93df009f41f..ddcdb3f674d8bb 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap @@ -312,7 +312,6 @@ exports[`DetailsRow renders details list row correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -445,7 +444,6 @@ exports[`DetailsRow renders details list row correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -578,7 +576,6 @@ exports[`DetailsRow renders details list row correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1124,7 +1121,6 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1257,7 +1253,6 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -1390,7 +1385,6 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2470,7 +2464,6 @@ exports[`DetailsRow renders details list row with multiple selections correctly { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2603,7 +2596,6 @@ exports[`DetailsRow renders details list row with multiple selections correctly { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -2736,7 +2728,6 @@ exports[`DetailsRow renders details list row with multiple selections correctly { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3282,7 +3273,6 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3415,7 +3405,6 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block; @@ -3548,7 +3537,6 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - border: none; box-sizing: border-box; color: #333333; display: inline-block;