Skip to content

Commit

Permalink
Separating border:none from .cell and removing from .root to avoid st…
Browse files Browse the repository at this point in the history 
…yle override in DetailsColumn (#7211)

* changed border from none to undefined

* adding change file

* updating comment in change file

* separating out 'border:none' from cellStyles and passing it separately

* updating snapshots
  • Loading branch information
@arkogupta @micahgodbolt
arkogupta authored and micahgodbolt committed Dec 5, 2018
1 parent d7f56b2 commit 0492281
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 37 deletions.
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json
View file
Original file line number Diff line number Diff line change
@@ -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": "[email protected]"
}
7 changes: 4 additions & 3 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -163,7 +163,8 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles
{
paddingLeft: '8px',
paddingRight: '8px',
width: '36px'
width: '36px',
border: 'none'
}
],

Expand Down
6 changes: 0 additions & 6 deletions ...fice-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
16 changes: 0 additions & 16 deletions ...office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 0 additions & 12 deletions .../office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 0492281

Please sign in to comment.