More friendly behavior when GroupedList header is too long (#22020)

* icon of group header is not shrink * Change files * group header of GroupedList should show '...' when it is too long * update snapshot Co-authored-by: ShuiRuTian <15898297@qq.com>
microsoft · Apr 19, 2022 · 6da8d2a · 6da8d2a
1 parent b277c0c
commit 6da8d2a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/change/@fluentui-react-5855132c-df7c-48fb-a439-ba589755f330.json b/change/@fluentui-react-5855132c-df7c-48fb-a439-ba589755f330.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "icon of group header is not shrink",
+  "packageName": "@fluentui/react",
+  "email": "15898297@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -7930,6 +7930,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     color: #605e5c;
                                     cursor: default;
                                     display: flex;
+                                    flex-shrink: 0;
                                     font-size: 12px;
                                     height: 48px;
                                     justify-content: center;
@@ -7996,6 +7997,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   font-size: 16px;
                                   font-weight: 600;
                                   outline: 0px;
+                                  overflow: hidden;
                                   padding-left: 12px;
                                   text-overflow: ellipsis;
                                   white-space: nowrap;
@@ -8795,6 +8797,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     color: #605e5c;
                                     cursor: default;
                                     display: flex;
+                                    flex-shrink: 0;
                                     font-size: 12px;
                                     height: 48px;
                                     justify-content: center;
@@ -8861,6 +8864,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   font-size: 16px;
                                   font-weight: 600;
                                   outline: 0px;
+                                  overflow: hidden;
                                   padding-left: 12px;
                                   text-overflow: ellipsis;
                                   white-space: nowrap;

diff --git a/packages/react/src/components/GroupedList/GroupHeader.styles.ts b/packages/react/src/components/GroupedList/GroupHeader.styles.ts
@@ -147,6 +147,7 @@ export const getStyles = (props: IGroupHeaderStyleProps): IGroupHeaderStyles =>
       checkExpandResetStyles,
       {
         display: 'flex',
+        flexShrink: 0,
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: fonts.small.fontSize,
@@ -189,6 +190,7 @@ export const getStyles = (props: IGroupHeaderStyleProps): IGroupHeaderStyles =>
         outline: 0,
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
+        overflow: 'hidden',
       },
     ],
     dropIcon: [