cozy-ui 74.1.0 → 74.4.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [74.4.0](https://github.com/cozy/cozy-ui/compare/v74.3.0...v74.4.0) (2022-09-06)
+
+
+### Bug Fixes
+
+* Add a mid ellipsis to the filename in the qualification list ([4f30229](https://github.com/cozy/cozy-ui/commit/4f30229))
+* Add a missing `overflow: hidden;` property to the viewer filename ([6d9b5c2](https://github.com/cozy/cozy-ui/commit/6d9b5c2))
+
+
+### Features
+
+* Display Viewer's Download button on iOS Flagship app ([b21726c](https://github.com/cozy/cozy-ui/commit/b21726c)), closes [cozy/cozy-ui#2215](https://github.com/cozy/cozy-ui/issues/2215)
+
+# [74.3.0](https://github.com/cozy/cozy-ui/compare/v74.2.0...v74.3.0) (2022-09-02)
+
+
+### Features
+
+* Add copy icon ([f6c9275](https://github.com/cozy/cozy-ui/commit/f6c9275))
+
+# [74.2.0](https://github.com/cozy/cozy-ui/compare/v74.1.0...v74.2.0) (2022-09-02)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Adjust height when content changes ([1c0ad64](https://github.com/cozy/cozy-ui/commit/1c0ad64))
+* **BottomSheet:** Force modal zindex value for BottomSheet ([a22405d](https://github.com/cozy/cozy-ui/commit/a22405d))
+* **BottomSheet:** Remove container if no backdrop ([3830e52](https://github.com/cozy/cozy-ui/commit/3830e52))
+* **BottomSheet:** Remove fragment prop if no portal ([cc49949](https://github.com/cozy/cozy-ui/commit/cc49949))
+
+
+### Features
+
+* **BottomSheet:** Upgrade mui-bottom-sheet to 1.0.9 ([59484ae](https://github.com/cozy/cozy-ui/commit/59484ae))
+
 # [74.1.0](https://github.com/cozy/cozy-ui/compare/v74.0.0...v74.1.0) (2022-09-02)
 
 

package/assets/icons/ui/copy.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 0a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h7Zm-4 6H3v8h7V6Zm4-4H7v2h3a2 2 0 0 1 2 2v4h2V2Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.1.0",
+  "version": "74.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -163,7 +163,7 @@
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
     "mime-types": "2.1.35",
-    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.8",
+    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
     "piwik-react-router": "0.12.1",

package/react/BottomSheet/BottomSheet.jsx

@@ -30,12 +30,25 @@ import {
 } from './helpers'
 import { ANIMATION_DURATION } from './constants'
 
-const createStyles = ({ squared, hasToolbarProps }) => ({
+const createContainerWrapperStyles = () => ({
   container: {
     position: 'fixed',
     zIndex: 'var(--zIndex-modal)',
     inset: 0
-  },
+  }
+})
+
+const ContainerWrapper = ({ showBackdrop, children }) => {
+  const styles = createContainerWrapperStyles()
+
+  if (showBackdrop) {
+    return <div style={styles.container}>{children}</div>
+  }
+
+  return children
+}
+
+const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
     borderTopLeftRadius: '1rem',
     borderTopRightRadius: '1rem',
@@ -43,6 +56,7 @@ const createStyles = ({ squared, hasToolbarProps }) => ({
     boxShadow:
       '0 -0.5px 0px 0 rgba(0, 0, 0, 0.10), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 0 -4px 4px 0 rgba(0, 0, 0, 0.02), 0 -8px 8px 0 rgba(0, 0, 0, 0.02), 0 -16px 16px 0 rgba(0, 0, 0, 0.02)',
     backgroundColor: 'var(--paperBackgroundColor)',
+    zIndex: 'var(--zIndex-modal)',
     ...(squared && {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
@@ -161,10 +175,10 @@ const BottomSheet = memo(
       ANIMATION_DURATION,
       isClosable && isBottomPosition
     )
-    const innerContentHeight = innerContentRef?.current?.offsetHeight ?? 0
 
     useEffect(() => {
       const headerContent = headerContentRef.current
+      const innerContentHeight = innerContentRef.current.offsetHeight
       const actionButtonsHeight = headerContent
         ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
         : 0
@@ -198,17 +212,18 @@ const BottomSheet = memo(
       // Used so that the BottomSheet can be opened to the top without stopping at the content height
       setBottomSpacerHeight(bottomSpacerHeight)
     }, [
-      innerContentHeight,
+      innerContentRef,
       toolbarProps,
       mediumHeightRatio,
       mediumHeight,
       showBackdrop,
       backdrop,
-      isClosable
+      isClosable,
+      children // to recompute data if content changes
     ])
 
     return (
-      <div style={styles.container}>
+      <ContainerWrapper showBackdrop={showBackdrop}>
         {getFlagshipMetadata().immersive && (
           <span style={styles.flagshipImmersive} />
         )}
@@ -269,7 +284,7 @@ const BottomSheet = memo(
             <div style={styles.bounceSafer} />
           </Fade>
         )}
-      </div>
+      </ContainerWrapper>
     )
   }
 )
@@ -306,12 +321,15 @@ BottomSheet.propTypes = {
 }
 
 const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
-  const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
   const cozyTheme = useCozyTheme()
+  const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
+  const wrapperProps = portalProps?.disablePortal
+    ? undefined
+    : { variant: cozyTheme }
 
   return (
     <Portal {...portalProps}>
-      <CozyThemeWrapper variant={cozyTheme}>
+      <CozyThemeWrapper {...wrapperProps}>
         <BottomSheet ref={ref} {...props} />
       </CozyThemeWrapper>
     </Portal>

package/react/BottomSheet/README.md

@@ -51,11 +51,14 @@ const initialVariants = [{
 }]
 const initialState = {
   isBottomSheetDisplayed: isTesting(),
+  isSecondBottomSheetDisplayed: false,
   mediumHeight: isTesting() ? 450 : undefined,
   mediumHeightRatio: undefined
 }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })
+const showSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: true })
+const hideSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: false })
 
 const handleChangeMediumHeight = el => {
   setState({ mediumHeight: Number(el.target.value) })
@@ -112,8 +115,22 @@ const settings = state.mediumHeight === undefined && state.mediumHeightRatio ===
         >
           {variant.withHeader && (
             <BottomSheetHeader className="u-ph-1 u-pb-1">
-              <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
+              <Button
+                className="u-mr-half"
+                variant="secondary"
+                label="Open BottomSheet"
+                fullWidth
+                onClick={showSecondBottomSheet}
+              />
               <Button variant="secondary" label="Button 2" fullWidth />
+
+              {state.isSecondBottomSheetDisplayed && (
+                <BottomSheet backdrop onClose={hideSecondBottomSheet}>
+                  <BottomSheetItem>
+                    {content.ada.short}
+                  </BottomSheetItem>
+                </BottomSheet>
+              )}
             </BottomSheetHeader>
           )}
           {!variant.withListContent && (

package/react/Icon/Readme.md

@@ -74,6 +74,7 @@ import Compass from 'cozy-ui/transpiled/react/Icons/Compass'
 import Connector from 'cozy-ui/transpiled/react/Icons/Connector'
 import Contract from 'cozy-ui/transpiled/react/Icons/Contract'
 import Contrast from 'cozy-ui/transpiled/react/Icons/Contrast'
+import Copy from 'cozy-ui/transpiled/react/Icons/Copy'
 import CozyCircle from 'cozy-ui/transpiled/react/Icons/CozyCircle'
 import CozyLaugh from 'cozy-ui/transpiled/react/Icons/CozyLaugh'
 import CozyText from 'cozy-ui/transpiled/react/Icons/CozyText'
@@ -292,6 +293,7 @@ const icons = [
   Connector,
   Contract,
   Contrast,
+  Copy,
   CozyCircle,
   CozyLaugh,
   CozyText,
@@ -848,7 +850,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -205,7 +205,7 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M12.5 4h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm0 3h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm0 3h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zm0 3h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zM3 5V2h4v6L5 6 3 8V5zm11-5H2c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z"/>
 </symbol><symbol id="contrast" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M12.444 11.111H8v1.333h4.444v-1.333zM14 14H2L14 2v12zM2.222 4H4V2.222h1.333V4h1.778v1.333H5.333v1.778H4V5.333H2.222V4zm12-4H1.778C.79 0 0 .791 0 1.778v12.444C0 15.204.796 16 1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .79 15.2 0 14.222 0z"/>
-</symbol><symbol id="cozy-circle" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm2 0c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10Zm-8.59 1.206c.134.086.33.046.417-.085a.28.28 0 0 0-.087-.396c-.116-.073-.125-.223-.125-.223a.296.296 0 0 0-.3-.282h-.006a.306.306 0 0 0-.21.087.283.283 0 0 0-.085.21.895.895 0 0 0 .029.183 1.682 1.682 0 0 1-2.087.004c.03-.11.03-.189.03-.191a.294.294 0 0 0-.291-.292.285.285 0 0 0-.213.076.289.289 0 0 0-.098.204s-.008.15-.126.225a.282.282 0 0 0-.085.396.315.315 0 0 0 .442.068l.007-.005c.392.295.874.455 1.375.455a2.29 2.29 0 0 0 1.379-.456l.033.022Zm.766-5.313c.521.502.845 1.153.932 1.856C14.726 7.892 16 9.236 16 10.869 16 12.594 14.574 14 12.822 14H7.177C5.425 14 4 12.595 4 10.868c0-.823.322-1.601.906-2.19a3.179 3.179 0 0 1 1.893-.92c.085-.707.41-1.36.933-1.865A3.18 3.18 0 0 1 9.954 5c.835 0 1.625.316 2.222.893Z"/></symbol><symbol id="cozy-laugh" viewBox="0 0 16 16">
+</symbol><symbol id="copy" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 0a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h7Zm-4 6H3v8h7V6Zm4-4H7v2h3a2 2 0 0 1 2 2v4h2V2Z"/></symbol><symbol id="cozy-circle" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm2 0c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10Zm-8.59 1.206c.134.086.33.046.417-.085a.28.28 0 0 0-.087-.396c-.116-.073-.125-.223-.125-.223a.296.296 0 0 0-.3-.282h-.006a.306.306 0 0 0-.21.087.283.283 0 0 0-.085.21.895.895 0 0 0 .029.183 1.682 1.682 0 0 1-2.087.004c.03-.11.03-.189.03-.191a.294.294 0 0 0-.291-.292.285.285 0 0 0-.213.076.289.289 0 0 0-.098.204s-.008.15-.126.225a.282.282 0 0 0-.085.396.315.315 0 0 0 .442.068l.007-.005c.392.295.874.455 1.375.455a2.29 2.29 0 0 0 1.379-.456l.033.022Zm.766-5.313c.521.502.845 1.153.932 1.856C14.726 7.892 16 9.236 16 10.869 16 12.594 14.574 14 12.822 14H7.177C5.425 14 4 12.595 4 10.868c0-.823.322-1.601.906-2.19a3.179 3.179 0 0 1 1.893-.92c.085-.707.41-1.36.933-1.865A3.18 3.18 0 0 1 9.954 5c.835 0 1.625.316 2.222.893Z"/></symbol><symbol id="cozy-laugh" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M4 6a4 4 0 1 1 8 0 4 4 0 1 1 0 8H4a4 4 0 1 1 0-8zm1 3s0 2 3 2 3-2 3-2H5z"/>
 </symbol><symbol id="cozy-text" viewBox="0 0 52 19"><path d="M10.277 3.262c-.067.084-.143.16-.227.227a.516.516 0 01-.319.085.756.756 0 01-.436-.162 5.113 5.113 0 00-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338-.47.219-.878.55-1.19.962-.316.416-.556.923-.721 1.521a7.592 7.592 0 00-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435a5.93 5.93 0 00.585-.436c.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 01-1.02.949 5.85 5.85 0 01-1.203.637c-.43.166-.877.288-1.332.364a8.488 8.488 0 01-1.411.117 5.846 5.846 0 01-2.308-.455 5.228 5.228 0 01-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139C.419 9.417.267 8.458.267 7.383c0-.98.136-1.885.41-2.717a6.046 6.046 0 011.209-2.151 5.588 5.588 0 011.969-1.418C4.635.755 5.528.584 6.533.584c.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zM19.091.584c.97 0 1.848.158 2.633.474.76.3 1.444.767 2.001 1.366.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 01-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 01-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 011.28-2.146 5.55 5.55 0 012.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM37.46 1.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V14H27.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916V.792h9.854v1.066zM51.604.792l-7.332 17.043a1.07 1.07 0 01-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L38.5.792h2.21c.217 0 .386.052.507.156a.906.906 0 01.26.351l3.354 7.93c.07.2.136.4.201.605.064.199.118.4.163.604.12-.413.26-.821.416-1.222l3.237-7.917a.84.84 0 01.286-.364.73.73 0 01.442-.143h2.028z" fill-rule="nonzero"/></symbol><symbol id="credit-card-add" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M2 11.003l3-.001c0 .702.127 1.372.35 1.998H1.996A2.003 2.003 0 0 1 0 11.003V1.997C0 .898.9 0 1.997 0h12.006C15.101 0 16 .898 16 1.997v5.689a6.031 6.031 0 0 0-1.999-1.876V6H1.998L2 11.003zM1.997 2v1H14V2H1.997zM11 8h2v3h3v2h-3v3h-2v-3H8v-2h3V8z"/>

package/react/Icons/Copy.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/copy.svg` to regenerate;
+import React from 'react'
+
+function SvgCopy(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 0a2 2 0 012 2v8a2 2 0 01-2 2h-2v2a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h2V2a2 2 0 012-2h7zm-4 6H3v8h7V6zm4-4H7v2h3a2 2 0 012 2v4h2V2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCopy

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
-import { isFlagshipApp, isIOS } from 'cozy-device-helper'
 
 import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
@@ -15,10 +14,7 @@ const ForwardOrDownloadButton = ({ file }) => {
     ? ForwardButton
     : DownloadButton
 
-  // Temporarily disable Download button on iOS Flagship app until
-  // the download feature is fixed on this platform
-  // When fixed on this platform, revert this commit from PR #2215
-  return isFlagshipApp() && isIOS() ? null : <FileActionButton file={file} />
+  return <FileActionButton file={file} />
 }
 
 ForwardOrDownloadButton.propTypes = {

package/react/Viewer/Panel/Qualification.jsx

@@ -7,6 +7,7 @@ import List from '../../MuiCozyTheme/List'
 import ListItem from '../../MuiCozyTheme/ListItem'
 import QualificationListItemText from './QualificationListItemText'
 import { withViewerLocales } from '../withViewerLocales'
+import MidEllipsis from '../../MidEllipsis'
 
 const {
   document: {
@@ -53,9 +54,13 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
         <QualificationListItemText
           primary={t('Viewer.panel.qualification.label.title')}
           secondary={
-            pageLabel
-              ? t(`Viewer.panel.qualification.label.${pageLabel}`)
-              : filename
+            <MidEllipsis
+              text={
+                pageLabel
+                  ? t(`Viewer.panel.qualification.label.${pageLabel}`)
+                  : filename
+              }
+            />
           }
         />
       </ListItem>

package/react/Viewer/Readme.md

@@ -73,8 +73,15 @@ const files = [
   {
     _id: 'text',
     class: 'text',
-    name: 'Demo.txt',
-    mime: 'text/plain'
+    name: 'LoremipsumdolorsitametconsecteturadipiscingelitSednonrisusSuspendisselectustortordignissimsitametadipiscingnecultriciesseddolorCraselementumultricesdiamMaecenasligulamassavariusasempercongueeuismodnonmiProinporttitororcinecnonummymolestieenimesteleifendminonfermentumdiamnislsitameteratDuissemperDuisarcumassascelerisquevitaeconsequatinpretiumaenimPellentesquecongueUtinrisusvolutpatliberopharetratemporCrasvestibulumbibendumauguePraesentegestasleoinpedePraesentblanditodioeuenimPellentesquesedduiutaugueblanditsodalesVestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCuraeAliquamnibhMaurisacmaurissedpedepellentesquefermentumMaecenasadipiscingantenondiamsodaleshendrerit.txt',
+    mime: 'text/plain',
+    metadata: {
+      datetime: "2022-01-01T12:00:00.000Z",
+      datetimeLabel: "datetime",
+      qualification: {
+        label: 'tax_notice'
+      }
+    }
   },
     {
     _id: 'text',

package/react/Viewer/styles.styl

@@ -75,6 +75,7 @@ $viewerMarginTopMedium = $toolbarHeightMedium - $footerHeight
 .viewer-filename
     max-width     90%
     text-overflow ellipsis
+    overflow hidden
 
 .viewer-pdfviewer-pdf
     overflow auto