Merge pull request #1940 from cozy/fix/squareAppIconSpaceEllipsis

cozy · Nov 2, 2021 · 09ced6d · 09ced6d
2 parents c6dd024 + bcd521c
commit 09ced6d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/react/SquareAppIcon/Readme.md b/react/SquareAppIcon/Readme.md
@@ -27,7 +27,7 @@ const theme = useCozyTheme()
     <SquareAppIcon name="Add" variant="add" />
   </Grid>
   <Grid item>
-    <SquareAppIcon app="testapp" name="No Account" variant="ghost" />
+    <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
   </Grid>
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />

diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
@@ -35,7 +35,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-7 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -77,7 +77,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-1 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     modified
   </h6>
@@ -119,7 +119,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-13 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     testslug
   </h6>
@@ -168,7 +168,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-37 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   />
 </div>
 `;
@@ -220,7 +220,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-31 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -262,7 +262,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-25 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -304,7 +304,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-19 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -349,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
     </span>
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-43 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     shortcut
   </h6>

diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
@@ -26,6 +26,9 @@ const useStyles = makeStyles(theme => ({
     lineHeight: '1.188rem',
     margin: '0.5rem 0.25rem 0 0.25rem',
     textShadow: theme.textShadows[1],
+    lineClamp: '2',
+    boxOrient: 'vertical',
+    display: '-webkit-box',
     height: '2.375rem',
     [theme.breakpoints.down('sm')]: {
       width: '3.75rem',
@@ -121,7 +124,7 @@ export const SquareAppIcon = ({ app, name, variant }) => {
         </Badge>
       </InfosBadge>
       <Typography
-        className={cx(classes.name, 'u-ellipsis', 'u-ov-hidden')}
+        className={cx(classes.name, 'u-spacellipsis')}
         variant="h6"
         align="center"
       >