cozy-ui 62.5.1 → 62.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [62.5.2](https://github.com/cozy/cozy-ui/compare/v62.5.1...v62.5.2) (2022-04-07)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Implement flagship top/bottom spacing ([50f2ff9](https://github.com/cozy/cozy-ui/commit/50f2ff9))
7
+
1
8
  ## [62.5.1](https://github.com/cozy/cozy-ui/compare/v62.5.0...v62.5.1) (2022-04-06)
2
9
 
3
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "62.5.1",
3
+ "version": "62.5.2",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
@@ -96,10 +96,19 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
96
96
  getComputedStyle(headerContent).getPropertyValue('padding-bottom')
97
97
  )
98
98
  : 0
99
+
100
+ // Will return 0 if the variable is not set
101
+ const flagshipBottomOffset = Number(
102
+ getComputedStyle(document.body)
103
+ .getPropertyValue('--flagship-bottom-height')
104
+ .replace('px', '')
105
+ )
106
+
99
107
  const minHeight =
100
108
  headerRef.current.offsetHeight +
101
109
  actionButtonsHeight +
102
- actionButtonsBottomMargin
110
+ actionButtonsBottomMargin +
111
+ flagshipBottomOffset
103
112
 
104
113
  // Used so that the bottomSheet can be opened to the top,
105
114
  // without stopping at the content height
@@ -5,6 +5,7 @@
5
5
  top 1.15rem
6
6
  right 1.15rem
7
7
  z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
8
+ transform translateY(var(--flagship-top-height))
8
9
  +small-screen()
9
10
  top 0.25rem
10
11
  right 0.25rem
@@ -411,6 +411,9 @@ const makeOverrides = theme => ({
411
411
  },
412
412
  MuiDialogTitle: {
413
413
  root: {
414
+ '.flagship-app &': {
415
+ paddingTop: 'calc(var(--flagship-top-height) + 0.75rem) !important'
416
+ },
414
417
  ...theme.typography.h3,
415
418
  boxSizing: 'border-box',
416
419
  width: '100%',
@@ -438,6 +441,9 @@ const makeOverrides = theme => ({
438
441
  },
439
442
  MuiDialogContent: {
440
443
  root: {
444
+ '.flagship-app &': {
445
+ marginBottom: 'var(--flagship-bottom-height) !important'
446
+ },
441
447
  padding: '24px 32px 0',
442
448
  [theme.breakpoints.down('sm')]: {
443
449
  padding: '24px 16px 0'
@@ -77,7 +77,7 @@ $footerHeight = 3.5rem
77
77
  +medium-screen()
78
78
  height $toolbarHeightMedium
79
79
  width calc(100% - 1rem)
80
- padding 0 1rem 0 0
80
+ padding var(--flagship-top-height) 1rem 0 0
81
81
  background var(--paperBackgroundColor)
82
82
  border-bottom 1px solid var(--dividerColor)
83
83
 
@@ -87,5 +87,5 @@ $footerHeight = 3.5rem
87
87
  z-index $modal-footer-index
88
88
  width 100%
89
89
  height $footerHeight
90
- padding-bottom env(safe-area-inset-bottom)
90
+ padding-bottom var(--flagship-bottom-height, env(safe-area-inset-bottom))
91
91
  background var(--paperBackgroundColor)
@@ -17,6 +17,10 @@ $viewerMarginTopMedium = $toolbarHeightMedium - $footerHeight
17
17
  background var(--charcoalGrey)
18
18
  color var(--white)
19
19
 
20
+ .flagship-app &
21
+ padding-top var(--flagship-top-height)
22
+ padding-bottom var(--flagship-bottom-height)
23
+
20
24
  +medium-screen()
21
25
  color var(--charcoalGrey)
22
26
  background var(--white)
@@ -115,8 +115,10 @@ var BottomSheet = function BottomSheet(_ref2) {
115
115
  var maxHeight = computeMaxHeight(toolbarProps);
116
116
  var computedMediumHeight = mediumHeight || Math.round(maxHeight * mediumHeightRatio);
117
117
  var actionButtonsHeight = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height')) : 0;
118
- var actionButtonsBottomMargin = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('padding-bottom')) : 0;
119
- var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin; // Used so that the bottomSheet can be opened to the top,
118
+ var actionButtonsBottomMargin = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('padding-bottom')) : 0; // Will return 0 if the variable is not set
119
+
120
+ var flagshipBottomOffset = Number(getComputedStyle(document.body).getPropertyValue('--flagship-bottom-height').replace('px', ''));
121
+ var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin + flagshipBottomOffset; // Used so that the bottomSheet can be opened to the top,
120
122
  // without stopping at the content height
121
123
 
122
124
  var bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight;
@@ -395,7 +395,11 @@ var makeOverrides = function makeOverrides(theme) {
395
395
  }
396
396
  },
397
397
  MuiDialogTitle: {
398
- root: _objectSpread(_objectSpread({}, theme.typography.h3), {}, (_objectSpread2 = {
398
+ root: _objectSpread(_objectSpread({
399
+ '.flagship-app &': {
400
+ paddingTop: 'calc(var(--flagship-top-height) + 0.75rem) !important'
401
+ }
402
+ }, theme.typography.h3), {}, (_objectSpread2 = {
399
403
  boxSizing: 'border-box',
400
404
  width: '100%',
401
405
  padding: '1.5rem 2rem'
@@ -417,6 +421,9 @@ var makeOverrides = function makeOverrides(theme) {
417
421
  },
418
422
  MuiDialogContent: {
419
423
  root: (_root2 = {
424
+ '.flagship-app &': {
425
+ marginBottom: 'var(--flagship-bottom-height) !important'
426
+ },
420
427
  padding: '24px 32px 0'
421
428
  }, _defineProperty(_root2, theme.breakpoints.down('sm'), {
422
429
  padding: '24px 16px 0'
@@ -15,6 +15,7 @@ var styles = {
15
15
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
16
16
  "viewer-footer": "styles__viewer-footer___29sbs",
17
17
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
18
+ "flagship-app": "styles__flagship-app___KFqbm",
18
19
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
19
20
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
20
21
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -14,6 +14,7 @@ var styles = {
14
14
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
15
15
  "viewer-footer": "styles__viewer-footer___29sbs",
16
16
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
17
+ "flagship-app": "styles__flagship-app___KFqbm",
17
18
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
18
19
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
19
20
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -33,6 +33,7 @@ var styles = {
33
33
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
34
34
  "viewer-footer": "styles__viewer-footer___29sbs",
35
35
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
36
+ "flagship-app": "styles__flagship-app___KFqbm",
36
37
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
37
38
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
38
39
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -18,6 +18,7 @@ var styles = {
18
18
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
19
19
  "viewer-footer": "styles__viewer-footer___29sbs",
20
20
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
21
+ "flagship-app": "styles__flagship-app___KFqbm",
21
22
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
22
23
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
23
24
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -17,6 +17,7 @@ var styles = {
17
17
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
18
18
  "viewer-footer": "styles__viewer-footer___29sbs",
19
19
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
20
+ "flagship-app": "styles__flagship-app___KFqbm",
20
21
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
21
22
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
22
23
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -16,6 +16,7 @@ var styles = {
16
16
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
17
17
  "viewer-footer": "styles__viewer-footer___29sbs",
18
18
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
19
+ "flagship-app": "styles__flagship-app___KFqbm",
19
20
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
20
21
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
21
22
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -36,6 +36,7 @@ var styles = {
36
36
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
37
37
  "viewer-footer": "styles__viewer-footer___29sbs",
38
38
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
39
+ "flagship-app": "styles__flagship-app___KFqbm",
39
40
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
40
41
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
41
42
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -26,6 +26,7 @@ var styles = {
26
26
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
27
27
  "viewer-footer": "styles__viewer-footer___29sbs",
28
28
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
29
+ "flagship-app": "styles__flagship-app___KFqbm",
29
30
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
30
31
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
31
32
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -35,6 +35,7 @@ var styles = {
35
35
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
36
36
  "viewer-footer": "styles__viewer-footer___29sbs",
37
37
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
38
+ "flagship-app": "styles__flagship-app___KFqbm",
38
39
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
39
40
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
40
41
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -27,6 +27,7 @@ var styles = {
27
27
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
28
28
  "viewer-footer": "styles__viewer-footer___29sbs",
29
29
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
30
+ "flagship-app": "styles__flagship-app___KFqbm",
30
31
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
31
32
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
32
33
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -14,6 +14,7 @@ var styles = {
14
14
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
15
15
  "viewer-footer": "styles__viewer-footer___29sbs",
16
16
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
17
+ "flagship-app": "styles__flagship-app___KFqbm",
17
18
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
18
19
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
19
20
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -35,6 +35,7 @@ var styles = {
35
35
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
36
36
  "viewer-footer": "styles__viewer-footer___29sbs",
37
37
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
38
+ "flagship-app": "styles__flagship-app___KFqbm",
38
39
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
39
40
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
40
41
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",
@@ -15,6 +15,7 @@ var styles = {
15
15
  "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___13ibV",
16
16
  "viewer-footer": "styles__viewer-footer___29sbs",
17
17
  "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
18
+ "flagship-app": "styles__flagship-app___KFqbm",
18
19
  "viewer-imageviewer": "styles__viewer-imageviewer___TR2gU",
19
20
  "viewer-noviewer": "styles__viewer-noviewer___3heA6",
20
21
  "viewer-audioviewer": "styles__viewer-audioviewer___2HBWZ",