@atlaskit/mobile-header 6.1.8 → 6.1.10
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 +135 -50
- package/dist/cjs/components/MobileHeader.js +3 -3
- package/dist/cjs/styled.js +75 -15
- package/dist/es2019/styled.js +85 -53
- package/dist/esm/components/MobileHeader.js +1 -1
- package/dist/esm/styled.js +76 -15
- package/dist/types/components/MobileHeader.d.ts +1 -1
- package/dist/types-ts4.5/components/MobileHeader.d.ts +1 -1
- package/docs/0-intro.tsx +13 -19
- package/package.json +57 -59
- package/report.api.md +57 -58
- package/styled/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,36 @@
|
|
|
1
1
|
# @atlaskit/mobile-header
|
|
2
2
|
|
|
3
|
+
## 6.1.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 6.1.9
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
|
|
14
|
+
[`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
|
|
15
|
+
Upgrade Typescript from `4.9.5` to `5.4.2`
|
|
16
|
+
|
|
3
17
|
## 6.1.8
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
6
20
|
|
|
7
|
-
- [#67949](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67949)
|
|
21
|
+
- [#67949](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67949)
|
|
22
|
+
[`4ceb213f9313`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ceb213f9313) -
|
|
23
|
+
Migrate packages to use declarative entry points
|
|
8
24
|
- Updated dependencies
|
|
9
25
|
|
|
10
26
|
## 6.1.7
|
|
11
27
|
|
|
12
28
|
### Patch Changes
|
|
13
29
|
|
|
14
|
-
- [#61588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61588)
|
|
30
|
+
- [#61588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61588)
|
|
31
|
+
[`c2563e7fb1f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2563e7fb1f5) -
|
|
32
|
+
Remove reliance on logic from the deprecated `@atlaskit/theme` package. Theming is still available
|
|
33
|
+
via the `@atlaskit/tokens` package.
|
|
15
34
|
|
|
16
35
|
## 6.1.6
|
|
17
36
|
|
|
@@ -29,31 +48,41 @@
|
|
|
29
48
|
|
|
30
49
|
### Patch Changes
|
|
31
50
|
|
|
32
|
-
- [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787)
|
|
51
|
+
- [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787)
|
|
52
|
+
[`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal
|
|
53
|
+
changes to use space tokens. There is no expected visual or behaviour change.
|
|
33
54
|
|
|
34
55
|
## 6.1.3
|
|
35
56
|
|
|
36
57
|
### Patch Changes
|
|
37
58
|
|
|
38
|
-
- [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162)
|
|
59
|
+
- [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162)
|
|
60
|
+
[`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete
|
|
61
|
+
version.json
|
|
39
62
|
|
|
40
63
|
## 6.1.2
|
|
41
64
|
|
|
42
65
|
### Patch Changes
|
|
43
66
|
|
|
44
|
-
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
|
|
67
|
+
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
|
|
68
|
+
[`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
|
|
69
|
+
legacy types are published for TS 4.5-4.8
|
|
45
70
|
|
|
46
71
|
## 6.1.1
|
|
47
72
|
|
|
48
73
|
### Patch Changes
|
|
49
74
|
|
|
50
|
-
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
|
|
75
|
+
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
|
|
76
|
+
[`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
|
|
77
|
+
Typescript from `4.5.5` to `4.9.5`
|
|
51
78
|
|
|
52
79
|
## 6.1.0
|
|
53
80
|
|
|
54
81
|
### Minor Changes
|
|
55
82
|
|
|
56
|
-
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
|
|
83
|
+
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
|
|
84
|
+
[`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
|
|
85
|
+
minor dependency bump
|
|
57
86
|
|
|
58
87
|
### Patch Changes
|
|
59
88
|
|
|
@@ -63,38 +92,50 @@
|
|
|
63
92
|
|
|
64
93
|
### Patch Changes
|
|
65
94
|
|
|
66
|
-
- [#28238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28238)
|
|
95
|
+
- [#28238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28238)
|
|
96
|
+
[`005b25fd40d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/005b25fd40d) - Moved
|
|
97
|
+
`@emotion/styled` to dependency to ensure correct version (v11) is resolved.
|
|
67
98
|
|
|
68
99
|
## 6.0.0
|
|
69
100
|
|
|
70
101
|
### Major Changes
|
|
71
102
|
|
|
72
|
-
- [#27334](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27334)
|
|
103
|
+
- [#27334](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27334)
|
|
104
|
+
[`16f5b6bdaee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16f5b6bdaee) - Peer
|
|
105
|
+
Dependencies have changed due to the migration from styled-components to @emotion v11.
|
|
73
106
|
|
|
74
107
|
## 5.0.12
|
|
75
108
|
|
|
76
109
|
### Patch Changes
|
|
77
110
|
|
|
78
|
-
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
|
|
111
|
+
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
|
|
112
|
+
[`522a27e6119`](https://bitbucket.org/atlassian/atlassian-frontend/commits/522a27e6119) - Remove
|
|
113
|
+
`isOpen` prop from @atlaskit/banner, it is now open by default.
|
|
79
114
|
- Updated dependencies
|
|
80
115
|
|
|
81
116
|
## 5.0.11
|
|
82
117
|
|
|
83
118
|
### Patch Changes
|
|
84
119
|
|
|
85
|
-
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
|
|
120
|
+
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
|
|
121
|
+
[`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade
|
|
122
|
+
Typescript from `4.3.5` to `4.5.5`
|
|
86
123
|
|
|
87
124
|
## 5.0.10
|
|
88
125
|
|
|
89
126
|
### Patch Changes
|
|
90
127
|
|
|
91
|
-
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
|
|
128
|
+
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
|
|
129
|
+
[`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade
|
|
130
|
+
Typescript from `4.2.4` to `4.3.5`.
|
|
92
131
|
|
|
93
132
|
## 5.0.9
|
|
94
133
|
|
|
95
134
|
### Patch Changes
|
|
96
135
|
|
|
97
|
-
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
|
|
136
|
+
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
|
|
137
|
+
[`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade
|
|
138
|
+
to TypeScript 4.2.4
|
|
98
139
|
- Updated dependencies
|
|
99
140
|
|
|
100
141
|
## 5.0.8
|
|
@@ -107,9 +148,13 @@
|
|
|
107
148
|
|
|
108
149
|
### Patch Changes
|
|
109
150
|
|
|
110
|
-
- [#13136](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13136)
|
|
111
|
-
|
|
112
|
-
|
|
151
|
+
- [#13136](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13136)
|
|
152
|
+
[`524b20aff9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/524b20aff9a) - Update
|
|
153
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
154
|
+
- [`3c0349f272a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c0349f272a) - Update
|
|
155
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
156
|
+
- [`591d34f966f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/591d34f966f) - Update
|
|
157
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
113
158
|
|
|
114
159
|
## 5.0.6
|
|
115
160
|
|
|
@@ -121,15 +166,20 @@
|
|
|
121
166
|
|
|
122
167
|
### Patch Changes
|
|
123
168
|
|
|
124
|
-
- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857)
|
|
169
|
+
- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857)
|
|
170
|
+
[`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile
|
|
171
|
+
packages using babel rather than tsc
|
|
125
172
|
|
|
126
173
|
## 5.0.4
|
|
127
174
|
|
|
128
175
|
### Patch Changes
|
|
129
176
|
|
|
130
|
-
- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497)
|
|
131
|
-
|
|
132
|
-
|
|
177
|
+
- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497)
|
|
178
|
+
[`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export
|
|
179
|
+
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
|
|
180
|
+
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
|
|
181
|
+
versions here: https://atlaskit.atlassian.com/get-started Also add `typescript` to
|
|
182
|
+
`devDependencies` to denote version that the package was built with.
|
|
133
183
|
|
|
134
184
|
## 5.0.3
|
|
135
185
|
|
|
@@ -147,17 +197,22 @@
|
|
|
147
197
|
|
|
148
198
|
### Patch Changes
|
|
149
199
|
|
|
150
|
-
- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885)
|
|
200
|
+
- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885)
|
|
201
|
+
[`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded
|
|
202
|
+
to TypeScript 3.9.6 and tslib to 2.0.0
|
|
151
203
|
|
|
152
|
-
Since tslib is a dependency for all our packages we recommend that products also follow this tslib
|
|
153
|
-
to prevent duplicates of tslib being bundled.
|
|
204
|
+
Since tslib is a dependency for all our packages we recommend that products also follow this tslib
|
|
205
|
+
upgrade to prevent duplicates of tslib being bundled.
|
|
154
206
|
|
|
155
207
|
## 5.0.0
|
|
156
208
|
|
|
157
209
|
### Major Changes
|
|
158
210
|
|
|
159
|
-
- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335)
|
|
160
|
-
|
|
211
|
+
- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335)
|
|
212
|
+
[`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially
|
|
213
|
+
dropping IE11 support, from this version onwards there are no warranties of the package working in
|
|
214
|
+
IE11. For more information see:
|
|
215
|
+
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
|
|
161
216
|
|
|
162
217
|
### Patch Changes
|
|
163
218
|
|
|
@@ -177,7 +232,8 @@
|
|
|
177
232
|
|
|
178
233
|
- [patch][6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
|
|
179
234
|
|
|
180
|
-
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
|
|
235
|
+
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
|
|
236
|
+
[6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
|
|
181
237
|
|
|
182
238
|
- @atlaskit/docs@8.3.2
|
|
183
239
|
- @atlaskit/banner@10.1.5
|
|
@@ -190,7 +246,8 @@
|
|
|
190
246
|
|
|
191
247
|
### Patch Changes
|
|
192
248
|
|
|
193
|
-
- Updated dependencies
|
|
249
|
+
- Updated dependencies
|
|
250
|
+
[c0102a3ea2](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0102a3ea2):
|
|
194
251
|
- @atlaskit/icon@20.0.0
|
|
195
252
|
- @atlaskit/navigation@36.0.0
|
|
196
253
|
- @atlaskit/docs@8.3.1
|
|
@@ -207,7 +264,8 @@
|
|
|
207
264
|
|
|
208
265
|
### Patch Changes
|
|
209
266
|
|
|
210
|
-
- Updated dependencies
|
|
267
|
+
- Updated dependencies
|
|
268
|
+
[d2b8166208](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2b8166208):
|
|
211
269
|
- @atlaskit/docs@8.3.0
|
|
212
270
|
|
|
213
271
|
## 3.2.1
|
|
@@ -235,11 +293,13 @@
|
|
|
235
293
|
|
|
236
294
|
- [patch][097b696613](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/097b696613):
|
|
237
295
|
|
|
238
|
-
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving
|
|
296
|
+
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving
|
|
297
|
+
non-relative imports as relative imports
|
|
239
298
|
|
|
240
299
|
## 3.1.2
|
|
241
300
|
|
|
242
|
-
- Updated dependencies
|
|
301
|
+
- Updated dependencies
|
|
302
|
+
[06326ef3f7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/06326ef3f7):
|
|
243
303
|
- @atlaskit/docs@8.1.3
|
|
244
304
|
- @atlaskit/banner@10.0.4
|
|
245
305
|
- @atlaskit/button@13.0.9
|
|
@@ -248,7 +308,8 @@
|
|
|
248
308
|
|
|
249
309
|
## 3.1.1
|
|
250
310
|
|
|
251
|
-
- Updated dependencies
|
|
311
|
+
- Updated dependencies
|
|
312
|
+
[cfc3c8adb3](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cfc3c8adb3):
|
|
252
313
|
- @atlaskit/docs@8.1.2
|
|
253
314
|
- @atlaskit/button@13.0.8
|
|
254
315
|
- @atlaskit/navigation@35.1.5
|
|
@@ -260,17 +321,20 @@
|
|
|
260
321
|
|
|
261
322
|
- [minor][92a9ce6f80](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/92a9ce6f80):
|
|
262
323
|
|
|
263
|
-
- Added property `topOffset` to handle cases such as when we need to display banner above the
|
|
324
|
+
- Added property `topOffset` to handle cases such as when we need to display banner above the
|
|
325
|
+
mobile header
|
|
264
326
|
|
|
265
327
|
## 3.0.0
|
|
266
328
|
|
|
267
329
|
- [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
|
|
268
330
|
|
|
269
|
-
- Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
|
|
331
|
+
- Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
|
|
332
|
+
this package, please ensure you use at least this version of react and react-dom.
|
|
270
333
|
|
|
271
334
|
## 2.1.2
|
|
272
335
|
|
|
273
|
-
- Updated dependencies
|
|
336
|
+
- Updated dependencies
|
|
337
|
+
[9c0b4744be](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9c0b4744be):
|
|
274
338
|
- @atlaskit/docs@7.0.3
|
|
275
339
|
- @atlaskit/button@12.0.3
|
|
276
340
|
- @atlaskit/icon@16.0.9
|
|
@@ -279,7 +343,8 @@
|
|
|
279
343
|
|
|
280
344
|
## 2.1.1
|
|
281
345
|
|
|
282
|
-
- Updated dependencies
|
|
346
|
+
- Updated dependencies
|
|
347
|
+
[1e826b2966](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1e826b2966):
|
|
283
348
|
- @atlaskit/docs@7.0.2
|
|
284
349
|
- @atlaskit/icon@16.0.8
|
|
285
350
|
- @atlaskit/navigation@34.0.3
|
|
@@ -294,7 +359,8 @@
|
|
|
294
359
|
|
|
295
360
|
## 2.0.1
|
|
296
361
|
|
|
297
|
-
- Updated dependencies
|
|
362
|
+
- Updated dependencies
|
|
363
|
+
[9d5cc39394](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9d5cc39394):
|
|
298
364
|
- @atlaskit/docs@7.0.1
|
|
299
365
|
- @atlaskit/icon@16.0.5
|
|
300
366
|
- @atlaskit/navigation@34.0.1
|
|
@@ -309,8 +375,9 @@
|
|
|
309
375
|
|
|
310
376
|
### Dropping CJS support in all @atlaskit packages
|
|
311
377
|
|
|
312
|
-
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
|
|
313
|
-
|
|
378
|
+
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
|
|
379
|
+
distribute esm. This means all distributed code will be transpiled, but will still contain
|
|
380
|
+
`import` and `export` declarations.
|
|
314
381
|
|
|
315
382
|
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
|
|
316
383
|
|
|
@@ -324,19 +391,31 @@
|
|
|
324
391
|
import colors from `@atlaskit/theme/dist/esm/colors`;
|
|
325
392
|
```
|
|
326
393
|
|
|
327
|
-
This has a couple of issues. 1, it treats the file system as API making internal refactors harder,
|
|
394
|
+
This has a couple of issues. 1, it treats the file system as API making internal refactors harder,
|
|
395
|
+
we have to worry about how consumers might be using things that aren't _actually_ supposed to be
|
|
396
|
+
used. 2. We are unable to do this _internally_ in @atlaskit packages. This leads to lots of
|
|
397
|
+
packages bundling all of theme, just to use a single color, especially in situations where tree
|
|
398
|
+
shaking fails.
|
|
328
399
|
|
|
329
|
-
To support being able to use multiple entrypoints internally, we unfortunately cannot have
|
|
400
|
+
To support being able to use multiple entrypoints internally, we unfortunately cannot have
|
|
401
|
+
multiple distributions as they would need to have very different imports from of their own
|
|
402
|
+
internal dependencies.
|
|
330
403
|
|
|
331
|
-
ES Modules are widely supported by all modern bundlers and can be worked around in node
|
|
404
|
+
ES Modules are widely supported by all modern bundlers and can be worked around in node
|
|
405
|
+
environments.
|
|
332
406
|
|
|
333
|
-
We may choose to revisit this solution in the future if we find any unintended condequences, but
|
|
407
|
+
We may choose to revisit this solution in the future if we find any unintended condequences, but
|
|
408
|
+
we see this as a pretty sane path forward which should lead to some major bundle size decreases,
|
|
409
|
+
saner API's and simpler package architecture.
|
|
334
410
|
|
|
335
|
-
Please reach out to #fabric-build (if in Atlassian) or create an issue in
|
|
411
|
+
Please reach out to #fabric-build (if in Atlassian) or create an issue in
|
|
412
|
+
[Design System Support](https://ecosystem.atlassian.net/secure/CreateIssue.jspa?pid=24670) (for
|
|
413
|
+
external) if you have any questions or queries about this.
|
|
336
414
|
|
|
337
415
|
## 1.1.6
|
|
338
416
|
|
|
339
|
-
- Updated dependencies
|
|
417
|
+
- Updated dependencies
|
|
418
|
+
[d7ef59d432](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d7ef59d432):
|
|
340
419
|
- @atlaskit/docs@6.0.1
|
|
341
420
|
- @atlaskit/button@10.1.2
|
|
342
421
|
- @atlaskit/navigation@33.3.9
|
|
@@ -379,15 +458,18 @@
|
|
|
379
458
|
|
|
380
459
|
## 1.1.1
|
|
381
460
|
|
|
382
|
-
- [patch] Adds missing implicit @babel/runtime dependency
|
|
461
|
+
- [patch] Adds missing implicit @babel/runtime dependency
|
|
462
|
+
[b71751b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b71751b)
|
|
383
463
|
|
|
384
464
|
## 1.1.0
|
|
385
465
|
|
|
386
|
-
- [minor] changing pageHeading type so can internationalize it easier
|
|
466
|
+
- [minor] changing pageHeading type so can internationalize it easier
|
|
467
|
+
[6e688a9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6e688a9)
|
|
387
468
|
|
|
388
469
|
## 1.0.1
|
|
389
470
|
|
|
390
|
-
- [patch] Updated dependencies
|
|
471
|
+
- [patch] Updated dependencies
|
|
472
|
+
[65c6514](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/65c6514)
|
|
391
473
|
- @atlaskit/docs@5.0.8
|
|
392
474
|
- @atlaskit/button@9.0.13
|
|
393
475
|
- @atlaskit/navigation@33.1.11
|
|
@@ -396,6 +478,9 @@
|
|
|
396
478
|
## 1.0.0
|
|
397
479
|
|
|
398
480
|
- [patch] updated examples [edff5c9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/edff5c9)
|
|
399
|
-
- [major] Changed layout from position sticky to fixed and adjusted color contrast.
|
|
400
|
-
|
|
401
|
-
- [
|
|
481
|
+
- [major] Changed layout from position sticky to fixed and adjusted color contrast.
|
|
482
|
+
[1648676](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1648676)
|
|
483
|
+
- [patch] Added dark theme and addressed PR comments/tasks.
|
|
484
|
+
[de18390](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/de18390)
|
|
485
|
+
- [major] add mobile header component to atlaskit
|
|
486
|
+
[93a318a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/93a318a)
|
|
@@ -17,10 +17,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
|
|
18
18
|
var _menu = _interopRequireDefault(require("@atlaskit/icon/glyph/menu"));
|
|
19
19
|
var styles = _interopRequireWildcard(require("../styled"));
|
|
20
|
-
function _getRequireWildcardCache(
|
|
21
|
-
function _interopRequireWildcard(
|
|
20
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
22
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
23
|
-
function _isNativeReflectConstruct() {
|
|
23
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
24
24
|
var MobileHeader = /*#__PURE__*/function (_PureComponent) {
|
|
25
25
|
(0, _inherits2.default)(MobileHeader, _PureComponent);
|
|
26
26
|
var _super = _createSuper(MobileHeader);
|
package/dist/cjs/styled.js
CHANGED
|
@@ -11,7 +11,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _constants = require("@atlaskit/theme/constants");
|
|
13
13
|
var _typography = require("@atlaskit/theme/typography");
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
16
|
// @atlaskit/navigation has a specific z-index, so we need to layer the header
|
|
16
17
|
// components relative to that.
|
|
17
18
|
var navLayer = _constants.layers.navigation();
|
|
@@ -24,28 +25,87 @@ var mobileHeaderHeight = 54;
|
|
|
24
25
|
var xPositioning = function xPositioning(_ref) {
|
|
25
26
|
var side = _ref.side,
|
|
26
27
|
isOpen = _ref.isOpen;
|
|
27
|
-
return side === 'right' ?
|
|
28
|
+
return side === 'right' ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
29
|
+
(0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\tright: 0;\n\t\t\t\ttransform: translateX(", ");\n\t\t\t"])), isOpen ? '0' : '100vw') : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
30
|
+
(0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\tleft: 0;\n\t\t\t\ttransform: translateX(", ");\n\t\t\t"])), isOpen ? '0' : '-100vw');
|
|
28
31
|
};
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
34
|
+
var MobileNavSlider = exports.MobileNavSlider = _styled.default.div(
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
|
|
36
|
+
function (props) {
|
|
37
|
+
return {
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
39
|
+
height: "calc(100vh - ".concat(props.topOffset, "px)"),
|
|
40
|
+
position: 'fixed',
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
42
|
+
top: "".concat(props.topOffset, "px"),
|
|
43
|
+
transition: 'transform 0.2s ease-out',
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
45
|
+
zIndex: layers.slider
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
49
|
+
xPositioning);
|
|
34
50
|
|
|
35
51
|
// make space so content below doesn't slip beneath the header
|
|
36
52
|
// since the content is `position: fixed`
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
54
|
+
var MobilePageHeader = exports.MobilePageHeader = _styled.default.header({
|
|
55
|
+
height: "".concat(mobileHeaderHeight, "px")
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
59
|
+
var MobilePageHeaderContent = exports.MobilePageHeaderContent = _styled.default.div(function (props) {
|
|
60
|
+
return {
|
|
61
|
+
alignItems: 'center',
|
|
62
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
|
|
63
|
+
boxSizing: 'border-box',
|
|
64
|
+
display: 'flex',
|
|
65
|
+
height: "".concat(mobileHeaderHeight, "px"),
|
|
66
|
+
padding: "var(--ds-space-100, 8px)",
|
|
67
|
+
position: 'fixed',
|
|
68
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
69
|
+
top: "".concat(props.topOffset, "px"),
|
|
70
|
+
width: '100%',
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
72
|
+
zIndex: layers.header
|
|
73
|
+
};
|
|
74
|
+
});
|
|
75
|
+
var opacityIn = (0, _react.keyframes)({
|
|
76
|
+
from: {
|
|
77
|
+
opacity: 0
|
|
78
|
+
},
|
|
79
|
+
to: {
|
|
80
|
+
opacity: 1
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
var opacityOut = (0, _react.keyframes)({
|
|
84
|
+
from: {
|
|
85
|
+
opacity: 1
|
|
86
|
+
},
|
|
87
|
+
to: {
|
|
88
|
+
opacity: 0
|
|
89
|
+
}
|
|
90
|
+
});
|
|
43
91
|
|
|
44
92
|
// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
|
|
45
93
|
// so we can't display the AK blanket underneath the navigation.
|
|
46
|
-
|
|
94
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
95
|
+
var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(_colors.N100A, ")"), layers.blanket, function (p) {
|
|
47
96
|
return p.isOpen ? opacityIn : opacityOut;
|
|
48
97
|
});
|
|
49
98
|
|
|
50
99
|
// use proper h1 and header styles but for mobile we don't want a top margin
|
|
51
|
-
|
|
100
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
101
|
+
var PageHeading = exports.PageHeading = _styled.default.h1({
|
|
102
|
+
flexGrow: 1,
|
|
103
|
+
marginLeft: "var(--ds-space-100, 8px)"
|
|
104
|
+
},
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
106
|
+
_typography.h500, {
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
108
|
+
'&&': {
|
|
109
|
+
marginTop: 0
|
|
110
|
+
}
|
|
111
|
+
});
|
package/dist/es2019/styled.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
1
2
|
import { css, keyframes } from '@emotion/react';
|
|
3
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
4
|
import styled from '@emotion/styled';
|
|
3
5
|
import { N100A, N20 } from '@atlaskit/theme/colors';
|
|
4
6
|
import { layers as akLayers } from '@atlaskit/theme/constants';
|
|
@@ -15,67 +17,97 @@ const mobileHeaderHeight = 54;
|
|
|
15
17
|
const xPositioning = ({
|
|
16
18
|
side,
|
|
17
19
|
isOpen
|
|
18
|
-
}) => side === 'right' ?
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
20
|
+
}) => side === 'right' ?
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
22
|
+
css`
|
|
23
|
+
right: 0;
|
|
24
|
+
transform: translateX(${isOpen ? '0' : '100vw'});
|
|
25
|
+
` :
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
27
|
+
css`
|
|
28
|
+
left: 0;
|
|
29
|
+
transform: translateX(${isOpen ? '0' : '-100vw'});
|
|
30
|
+
`;
|
|
31
|
+
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
33
|
+
export const MobileNavSlider = styled.div(
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
|
|
35
|
+
props => ({
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
|
+
height: `calc(100vh - ${props.topOffset}px)`,
|
|
38
|
+
position: 'fixed',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
40
|
+
top: `${props.topOffset}px`,
|
|
41
|
+
transition: 'transform 0.2s ease-out',
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
43
|
+
zIndex: layers.slider
|
|
44
|
+
}),
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
46
|
+
xPositioning);
|
|
33
47
|
|
|
34
48
|
// make space so content below doesn't slip beneath the header
|
|
35
49
|
// since the content is `position: fixed`
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
51
|
+
export const MobilePageHeader = styled.header({
|
|
52
|
+
height: `${mobileHeaderHeight}px`
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
56
|
+
export const MobilePageHeaderContent = styled.div(props => ({
|
|
57
|
+
alignItems: 'center',
|
|
58
|
+
backgroundColor: `var(--ds-background-neutral, ${N20})`,
|
|
59
|
+
boxSizing: 'border-box',
|
|
60
|
+
display: 'flex',
|
|
61
|
+
height: `${mobileHeaderHeight}px`,
|
|
62
|
+
padding: "var(--ds-space-100, 8px)",
|
|
63
|
+
position: 'fixed',
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
65
|
+
top: `${props.topOffset}px`,
|
|
66
|
+
width: '100%',
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
68
|
+
zIndex: layers.header
|
|
69
|
+
}));
|
|
70
|
+
const opacityIn = keyframes({
|
|
71
|
+
from: {
|
|
72
|
+
opacity: 0
|
|
73
|
+
},
|
|
74
|
+
to: {
|
|
75
|
+
opacity: 1
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
const opacityOut = keyframes({
|
|
79
|
+
from: {
|
|
80
|
+
opacity: 1
|
|
81
|
+
},
|
|
82
|
+
to: {
|
|
83
|
+
opacity: 0
|
|
84
|
+
}
|
|
85
|
+
});
|
|
59
86
|
|
|
60
87
|
// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
|
|
61
88
|
// so we can't display the AK blanket underneath the navigation.
|
|
89
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
62
90
|
export const FakeBlanket = styled.div`
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
91
|
+
background: ${`var(--ds-blanket, ${N100A})`};
|
|
92
|
+
bottom: 0;
|
|
93
|
+
left: 0;
|
|
94
|
+
position: fixed;
|
|
95
|
+
right: 0;
|
|
96
|
+
top: 0;
|
|
97
|
+
z-index: ${layers.blanket};
|
|
98
|
+
animation: ${p => p.isOpen ? opacityIn : opacityOut} 0.2s ease-out;
|
|
71
99
|
`;
|
|
72
100
|
|
|
73
101
|
// use proper h1 and header styles but for mobile we don't want a top margin
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
102
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
103
|
+
export const PageHeading = styled.h1({
|
|
104
|
+
flexGrow: 1,
|
|
105
|
+
marginLeft: "var(--ds-space-100, 8px)"
|
|
106
|
+
},
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
108
|
+
h500, {
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
110
|
+
'&&': {
|
|
111
|
+
marginTop: 0
|
|
80
112
|
}
|
|
81
|
-
|
|
113
|
+
});
|
|
@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
8
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
|
-
function _isNativeReflectConstruct() {
|
|
9
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
10
10
|
import React, { Fragment, PureComponent } from 'react';
|
|
11
11
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
12
12
|
import MenuIcon from '@atlaskit/icon/glyph/menu';
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
4
|
import { css, keyframes } from '@emotion/react';
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
6
|
import styled from '@emotion/styled';
|
|
5
7
|
import { N100A, N20 } from '@atlaskit/theme/colors';
|
|
6
8
|
import { layers as akLayers } from '@atlaskit/theme/constants';
|
|
@@ -17,28 +19,87 @@ var mobileHeaderHeight = 54;
|
|
|
17
19
|
var xPositioning = function xPositioning(_ref) {
|
|
18
20
|
var side = _ref.side,
|
|
19
21
|
isOpen = _ref.isOpen;
|
|
20
|
-
return side === 'right' ?
|
|
22
|
+
return side === 'right' ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
23
|
+
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\tright: 0;\n\t\t\t\ttransform: translateX(", ");\n\t\t\t"])), isOpen ? '0' : '100vw') : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
24
|
+
css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\tleft: 0;\n\t\t\t\ttransform: translateX(", ");\n\t\t\t"])), isOpen ? '0' : '-100vw');
|
|
21
25
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
28
|
+
export var MobileNavSlider = styled.div(
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
|
|
30
|
+
function (props) {
|
|
31
|
+
return {
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
33
|
+
height: "calc(100vh - ".concat(props.topOffset, "px)"),
|
|
34
|
+
position: 'fixed',
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
36
|
+
top: "".concat(props.topOffset, "px"),
|
|
37
|
+
transition: 'transform 0.2s ease-out',
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
39
|
+
zIndex: layers.slider
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
43
|
+
xPositioning);
|
|
27
44
|
|
|
28
45
|
// make space so content below doesn't slip beneath the header
|
|
29
46
|
// since the content is `position: fixed`
|
|
30
|
-
|
|
31
|
-
export var
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
48
|
+
export var MobilePageHeader = styled.header({
|
|
49
|
+
height: "".concat(mobileHeaderHeight, "px")
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
53
|
+
export var MobilePageHeaderContent = styled.div(function (props) {
|
|
54
|
+
return {
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
|
|
57
|
+
boxSizing: 'border-box',
|
|
58
|
+
display: 'flex',
|
|
59
|
+
height: "".concat(mobileHeaderHeight, "px"),
|
|
60
|
+
padding: "var(--ds-space-100, 8px)",
|
|
61
|
+
position: 'fixed',
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
63
|
+
top: "".concat(props.topOffset, "px"),
|
|
64
|
+
width: '100%',
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
66
|
+
zIndex: layers.header
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
var opacityIn = keyframes({
|
|
70
|
+
from: {
|
|
71
|
+
opacity: 0
|
|
72
|
+
},
|
|
73
|
+
to: {
|
|
74
|
+
opacity: 1
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
var opacityOut = keyframes({
|
|
78
|
+
from: {
|
|
79
|
+
opacity: 1
|
|
80
|
+
},
|
|
81
|
+
to: {
|
|
82
|
+
opacity: 0
|
|
83
|
+
}
|
|
84
|
+
});
|
|
36
85
|
|
|
37
86
|
// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
|
|
38
87
|
// so we can't display the AK blanket underneath the navigation.
|
|
39
|
-
|
|
88
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
89
|
+
export var FakeBlanket = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(N100A, ")"), layers.blanket, function (p) {
|
|
40
90
|
return p.isOpen ? opacityIn : opacityOut;
|
|
41
91
|
});
|
|
42
92
|
|
|
43
93
|
// use proper h1 and header styles but for mobile we don't want a top margin
|
|
44
|
-
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
95
|
+
export var PageHeading = styled.h1({
|
|
96
|
+
flexGrow: 1,
|
|
97
|
+
marginLeft: "var(--ds-space-100, 8px)"
|
|
98
|
+
},
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
100
|
+
h500, {
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
102
|
+
'&&': {
|
|
103
|
+
marginTop: 0
|
|
104
|
+
}
|
|
105
|
+
});
|
package/docs/0-intro.tsx
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
AtlassianInternalWarning,
|
|
5
|
-
code,
|
|
6
|
-
Example,
|
|
7
|
-
md,
|
|
8
|
-
Props,
|
|
9
|
-
} from '@atlaskit/docs';
|
|
3
|
+
import { AtlassianInternalWarning, code, Example, md, Props } from '@atlaskit/docs';
|
|
10
4
|
|
|
11
5
|
export default md`
|
|
12
6
|
${(<AtlassianInternalWarning />)}
|
|
@@ -19,18 +13,18 @@ export default md`
|
|
|
19
13
|
${code`import MobileHeader from '@atlaskit/mobile-header';`}
|
|
20
14
|
|
|
21
15
|
${(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
<Example
|
|
17
|
+
packageName="@atlaskit/mobile-header"
|
|
18
|
+
Component={require('../examples/01-basic').default}
|
|
19
|
+
title="Basic"
|
|
20
|
+
source={require('!!raw-loader!../examples/01-basic')}
|
|
21
|
+
/>
|
|
22
|
+
)}
|
|
29
23
|
|
|
30
24
|
${(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
25
|
+
<Props
|
|
26
|
+
heading="Mobile Header Props"
|
|
27
|
+
props={require('!!extract-react-types-loader!../src/components/MobileHeader')}
|
|
28
|
+
/>
|
|
29
|
+
)}
|
|
36
30
|
`;
|
package/package.json
CHANGED
|
@@ -1,60 +1,58 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
60
|
-
}
|
|
2
|
+
"name": "@atlaskit/mobile-header",
|
|
3
|
+
"version": "6.1.10",
|
|
4
|
+
"description": "A React component rendering a mobile header",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"typesVersions": {
|
|
16
|
+
">=4.5 <4.9": {
|
|
17
|
+
"*": [
|
|
18
|
+
"dist/types-ts4.5/*",
|
|
19
|
+
"dist/types-ts4.5/index.d.ts"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"atlaskit:src": "src/index.ts",
|
|
24
|
+
"af:exports": {
|
|
25
|
+
".": "./src/index.ts",
|
|
26
|
+
"./styled": "./src/styled.ts"
|
|
27
|
+
},
|
|
28
|
+
"atlassian": {
|
|
29
|
+
"team": "Bitbucket: CoreX",
|
|
30
|
+
"releaseModel": "continuous",
|
|
31
|
+
"website": {
|
|
32
|
+
"name": "Mobile Header"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@atlaskit/button": "^18.0.0",
|
|
37
|
+
"@atlaskit/icon": "^22.4.0",
|
|
38
|
+
"@atlaskit/theme": "^12.11.0",
|
|
39
|
+
"@atlaskit/tokens": "^1.52.0",
|
|
40
|
+
"@babel/runtime": "^7.0.0",
|
|
41
|
+
"@emotion/styled": "^11.0.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"@emotion/react": "^11.0.0",
|
|
45
|
+
"react": "^16.8.0"
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"enzyme": "^3.10.0",
|
|
49
|
+
"react-dom": "^16.8.0",
|
|
50
|
+
"react-test-renderer": "^16.8.0",
|
|
51
|
+
"typescript": "~5.4.2"
|
|
52
|
+
},
|
|
53
|
+
"techstack": {
|
|
54
|
+
"@atlassian/frontend": {
|
|
55
|
+
"import-structure": "atlassian-conventions"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/mobile-header"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -21,70 +22,68 @@ import { ReactNode } from 'react';
|
|
|
21
22
|
|
|
22
23
|
// @public (undocumented)
|
|
23
24
|
class MobileHeader extends PureComponent<MobileHeaderProps, MobileHeaderState> {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// (undocumented)
|
|
54
|
-
UNSAFE_componentWillReceiveProps(nextProps: MobileHeaderProps): void;
|
|
25
|
+
// (undocumented)
|
|
26
|
+
static defaultProps: {
|
|
27
|
+
topOffset: number;
|
|
28
|
+
pageHeading: string;
|
|
29
|
+
menuIconLabel: string;
|
|
30
|
+
drawerState: string;
|
|
31
|
+
};
|
|
32
|
+
// (undocumented)
|
|
33
|
+
handleNavSlideFinish: () => void;
|
|
34
|
+
// (undocumented)
|
|
35
|
+
handleSidebarSlideFinish: () => void;
|
|
36
|
+
// (undocumented)
|
|
37
|
+
render(): JSX.Element;
|
|
38
|
+
// (undocumented)
|
|
39
|
+
renderSlider: (
|
|
40
|
+
isOpen: boolean,
|
|
41
|
+
isAnimating: boolean,
|
|
42
|
+
onTransitionEnd: ((event: React_2.TransitionEvent<HTMLDivElement>) => void) | undefined,
|
|
43
|
+
side: string,
|
|
44
|
+
renderFn?: ((isOpen: boolean) => ReactNode) | undefined,
|
|
45
|
+
topOffset?: number,
|
|
46
|
+
) => JSX.Element;
|
|
47
|
+
// (undocumented)
|
|
48
|
+
state: {
|
|
49
|
+
isAnimatingNavigation: boolean;
|
|
50
|
+
isAnimatingSidebar: boolean;
|
|
51
|
+
};
|
|
52
|
+
// (undocumented)
|
|
53
|
+
UNSAFE_componentWillReceiveProps(nextProps: MobileHeaderProps): void;
|
|
55
54
|
}
|
|
56
55
|
export default MobileHeader;
|
|
57
56
|
|
|
58
57
|
// @public (undocumented)
|
|
59
58
|
interface MobileHeaderProps {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
59
|
+
// (undocumented)
|
|
60
|
+
customMenu?: ReactNode;
|
|
61
|
+
// (undocumented)
|
|
62
|
+
drawerState: 'navigation' | 'none' | 'sidebar' | string;
|
|
63
|
+
// (undocumented)
|
|
64
|
+
menuIconLabel: string;
|
|
65
|
+
// (undocumented)
|
|
66
|
+
navigation?: (isOpen: boolean) => ReactNode;
|
|
67
|
+
// (undocumented)
|
|
68
|
+
onDrawerClose?: () => void;
|
|
69
|
+
// (undocumented)
|
|
70
|
+
onNavigationOpen?: () => void;
|
|
71
|
+
// (undocumented)
|
|
72
|
+
pageHeading: ReactNode;
|
|
73
|
+
// (undocumented)
|
|
74
|
+
secondaryContent?: ReactNode;
|
|
75
|
+
// (undocumented)
|
|
76
|
+
sidebar?: (isOpen: boolean) => ReactNode;
|
|
77
|
+
// (undocumented)
|
|
78
|
+
topOffset?: number;
|
|
80
79
|
}
|
|
81
80
|
|
|
82
81
|
// @public (undocumented)
|
|
83
82
|
interface MobileHeaderState {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
// (undocumented)
|
|
84
|
+
isAnimatingNavigation: boolean;
|
|
85
|
+
// (undocumented)
|
|
86
|
+
isAnimatingSidebar: boolean;
|
|
88
87
|
}
|
|
89
88
|
|
|
90
89
|
// (No @packageDocumentation comment for this package)
|
|
@@ -98,8 +97,8 @@ interface MobileHeaderState {
|
|
|
98
97
|
|
|
99
98
|
```json
|
|
100
99
|
{
|
|
101
|
-
|
|
102
|
-
|
|
100
|
+
"@emotion/react": "^11.0.0",
|
|
101
|
+
"react": "^16.8.0"
|
|
103
102
|
}
|
|
104
103
|
```
|
|
105
104
|
|