From ce85f9b76165cdeac0493c2990bf4032b91059c7 Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Fri, 6 Apr 2018 18:16:51 -0700 Subject: [PATCH 1/5] Add missing hover and activate style slots to DetailsHeader --- .../office-ui-fabric-react/src/common/_semanticSlots.scss | 4 +++- .../src/components/DetailsList/DetailsHeader.scss | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss index 30636a35048729..eddd4e3b345d7e 100644 --- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss +++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss @@ -50,6 +50,8 @@ $menuHeaderColor: "[theme:menuHeader, default: #0078d4]"; /* Lists */ $listBackgroundColor: "[theme:listBackground, default: #ffffff]"; $listTextColor: "[theme:listText, default: #333333]"; +$listItemHeaderHoveredColor: "[theme:listItemHeaderHovered, default: #f4f4f4]"; +$listItemHeaderActivatedColor: "[theme:listItemActivatedHovered, default: #eaeaea]"; $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]"; $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]"; -$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]"; \ No newline at end of file +$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]"; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss index 6ee10c6f42cd2e..4fa21d79be2172 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss @@ -64,11 +64,11 @@ $isPaddedMargin: 24px; &:hover { color: $bodyTextColor; - background: $bodyBackgroundColor; + background: $listItemHeaderHoveredColor; } &:active { - background: $listItemBackgroundHoveredColor; + background: $listItemHeaderActivatedColor; } } From ae3fe61b1ade905e2267f320345b230706186c85 Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Fri, 6 Apr 2018 18:41:27 -0700 Subject: [PATCH 2/5] Fix phantom aria-describedby attribute --- .../src/components/DetailsList/DetailsHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx index 445fde7394f444..d1ce5425fac5fc 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx @@ -253,7 +253,7 @@ export class DetailsHeader extends BaseComponent Date: Fri, 6 Apr 2018 18:41:51 -0700 Subject: [PATCH 3/5] Fix overflow of headers caused by status icons --- .../components/DetailsList/DetailsHeader.scss | 19 +++++++++++++------ .../DetailsList.Documents.Example.tsx | 1 + 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss index 4fa21d79be2172..4927094cbd7b25 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss @@ -161,16 +161,23 @@ $isPaddedMargin: 24px; } .cellTitle { - display: block; + display: inline-flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + box-sizing: border-box; overflow: hidden; - @include focus-border($position: absolute); - top: 0; - left: 0; - bottom: 0; - right: 0; + max-width: 100%; + @include focus-border($position: auto); padding: 0 8px; } +.cellName { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; +} + :global(.ms-TooltipHost).checkTooltip { display: block; } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx index 472e8ca474fef2..67bf30c6857983 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx @@ -104,6 +104,7 @@ export class DetailsListDocumentsExample extends React.Component { return ( Date: Fri, 6 Apr 2018 18:42:23 -0700 Subject: [PATCH 4/5] Update change output --- .../details-header_2018-04-07-01-42.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json diff --git a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json b/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json new file mode 100644 index 00000000000000..711ddf9131d25d --- /dev/null +++ b/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix style and alignment issues with DetailsList headers", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file From f82dcfa1dc387039924358001e98b993300bb10b Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Fri, 6 Apr 2018 21:14:11 -0700 Subject: [PATCH 5/5] Update snapshot output --- .../DetailsList/__snapshots__/DetailsHeader.test.tsx.snap | 4 ++-- .../DetailsList/__snapshots__/DetailsList.test.tsx.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 311fa3eb38b373..9ac12c1175ed2f 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 @@ -135,7 +135,7 @@ exports[`DetailsHeader can render 1`] = ` className="" >