@atlaskit/mobile-header 6.1.9 → 6.1.11
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 +139 -51
- package/dist/cjs/components/MobileHeader.js +2 -2
- package/dist/cjs/styled.js +75 -15
- package/dist/es2019/components/MobileHeader.js +1 -1
- 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/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,45 @@
|
|
|
1
1
|
# @atlaskit/mobile-header
|
|
2
2
|
|
|
3
|
+
## 6.1.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#114683](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114683)
|
|
8
|
+
[`ff0815316ab38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ff0815316ab38) -
|
|
9
|
+
Removes usage of custom theme button in places where its API is not being used and the default
|
|
10
|
+
button is able to be used instead. This should give a slight performance (runtime) improvement.
|
|
11
|
+
|
|
12
|
+
## 6.1.10
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 6.1.9
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
6
21
|
|
|
7
|
-
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
|
|
22
|
+
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
|
|
23
|
+
[`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
|
|
24
|
+
Upgrade Typescript from `4.9.5` to `5.4.2`
|
|
8
25
|
|
|
9
26
|
## 6.1.8
|
|
10
27
|
|
|
11
28
|
### Patch Changes
|
|
12
29
|
|
|
13
|
-
- [#67949](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67949)
|
|
30
|
+
- [#67949](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67949)
|
|
31
|
+
[`4ceb213f9313`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ceb213f9313) -
|
|
32
|
+
Migrate packages to use declarative entry points
|
|
14
33
|
- Updated dependencies
|
|
15
34
|
|
|
16
35
|
## 6.1.7
|
|
17
36
|
|
|
18
37
|
### Patch Changes
|
|
19
38
|
|
|
20
|
-
- [#61588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61588)
|
|
39
|
+
- [#61588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61588)
|
|
40
|
+
[`c2563e7fb1f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2563e7fb1f5) -
|
|
41
|
+
Remove reliance on logic from the deprecated `@atlaskit/theme` package. Theming is still available
|
|
42
|
+
via the `@atlaskit/tokens` package.
|
|
21
43
|
|
|
22
44
|
## 6.1.6
|
|
23
45
|
|
|
@@ -35,31 +57,41 @@
|
|
|
35
57
|
|
|
36
58
|
### Patch Changes
|
|
37
59
|
|
|
38
|
-
- [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787)
|
|
60
|
+
- [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787)
|
|
61
|
+
[`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal
|
|
62
|
+
changes to use space tokens. There is no expected visual or behaviour change.
|
|
39
63
|
|
|
40
64
|
## 6.1.3
|
|
41
65
|
|
|
42
66
|
### Patch Changes
|
|
43
67
|
|
|
44
|
-
- [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162)
|
|
68
|
+
- [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162)
|
|
69
|
+
[`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete
|
|
70
|
+
version.json
|
|
45
71
|
|
|
46
72
|
## 6.1.2
|
|
47
73
|
|
|
48
74
|
### Patch Changes
|
|
49
75
|
|
|
50
|
-
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
|
|
76
|
+
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
|
|
77
|
+
[`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
|
|
78
|
+
legacy types are published for TS 4.5-4.8
|
|
51
79
|
|
|
52
80
|
## 6.1.1
|
|
53
81
|
|
|
54
82
|
### Patch Changes
|
|
55
83
|
|
|
56
|
-
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
|
|
84
|
+
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
|
|
85
|
+
[`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
|
|
86
|
+
Typescript from `4.5.5` to `4.9.5`
|
|
57
87
|
|
|
58
88
|
## 6.1.0
|
|
59
89
|
|
|
60
90
|
### Minor Changes
|
|
61
91
|
|
|
62
|
-
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
|
|
92
|
+
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
|
|
93
|
+
[`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
|
|
94
|
+
minor dependency bump
|
|
63
95
|
|
|
64
96
|
### Patch Changes
|
|
65
97
|
|
|
@@ -69,38 +101,50 @@
|
|
|
69
101
|
|
|
70
102
|
### Patch Changes
|
|
71
103
|
|
|
72
|
-
- [#28238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28238)
|
|
104
|
+
- [#28238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28238)
|
|
105
|
+
[`005b25fd40d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/005b25fd40d) - Moved
|
|
106
|
+
`@emotion/styled` to dependency to ensure correct version (v11) is resolved.
|
|
73
107
|
|
|
74
108
|
## 6.0.0
|
|
75
109
|
|
|
76
110
|
### Major Changes
|
|
77
111
|
|
|
78
|
-
- [#27334](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27334)
|
|
112
|
+
- [#27334](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27334)
|
|
113
|
+
[`16f5b6bdaee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16f5b6bdaee) - Peer
|
|
114
|
+
Dependencies have changed due to the migration from styled-components to @emotion v11.
|
|
79
115
|
|
|
80
116
|
## 5.0.12
|
|
81
117
|
|
|
82
118
|
### Patch Changes
|
|
83
119
|
|
|
84
|
-
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
|
|
120
|
+
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
|
|
121
|
+
[`522a27e6119`](https://bitbucket.org/atlassian/atlassian-frontend/commits/522a27e6119) - Remove
|
|
122
|
+
`isOpen` prop from @atlaskit/banner, it is now open by default.
|
|
85
123
|
- Updated dependencies
|
|
86
124
|
|
|
87
125
|
## 5.0.11
|
|
88
126
|
|
|
89
127
|
### Patch Changes
|
|
90
128
|
|
|
91
|
-
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
|
|
129
|
+
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
|
|
130
|
+
[`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade
|
|
131
|
+
Typescript from `4.3.5` to `4.5.5`
|
|
92
132
|
|
|
93
133
|
## 5.0.10
|
|
94
134
|
|
|
95
135
|
### Patch Changes
|
|
96
136
|
|
|
97
|
-
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
|
|
137
|
+
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
|
|
138
|
+
[`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade
|
|
139
|
+
Typescript from `4.2.4` to `4.3.5`.
|
|
98
140
|
|
|
99
141
|
## 5.0.9
|
|
100
142
|
|
|
101
143
|
### Patch Changes
|
|
102
144
|
|
|
103
|
-
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
|
|
145
|
+
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
|
|
146
|
+
[`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade
|
|
147
|
+
to TypeScript 4.2.4
|
|
104
148
|
- Updated dependencies
|
|
105
149
|
|
|
106
150
|
## 5.0.8
|
|
@@ -113,9 +157,13 @@
|
|
|
113
157
|
|
|
114
158
|
### Patch Changes
|
|
115
159
|
|
|
116
|
-
- [#13136](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13136)
|
|
117
|
-
|
|
118
|
-
|
|
160
|
+
- [#13136](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13136)
|
|
161
|
+
[`524b20aff9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/524b20aff9a) - Update
|
|
162
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
163
|
+
- [`3c0349f272a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c0349f272a) - Update
|
|
164
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
165
|
+
- [`591d34f966f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/591d34f966f) - Update
|
|
166
|
+
package.jsons to remove unused dependencies. Also excludes tests from some build tsconfigs
|
|
119
167
|
|
|
120
168
|
## 5.0.6
|
|
121
169
|
|
|
@@ -127,15 +175,20 @@
|
|
|
127
175
|
|
|
128
176
|
### Patch Changes
|
|
129
177
|
|
|
130
|
-
- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857)
|
|
178
|
+
- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857)
|
|
179
|
+
[`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile
|
|
180
|
+
packages using babel rather than tsc
|
|
131
181
|
|
|
132
182
|
## 5.0.4
|
|
133
183
|
|
|
134
184
|
### Patch Changes
|
|
135
185
|
|
|
136
|
-
- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497)
|
|
137
|
-
|
|
138
|
-
|
|
186
|
+
- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497)
|
|
187
|
+
[`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export
|
|
188
|
+
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
|
|
189
|
+
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
|
|
190
|
+
versions here: https://atlaskit.atlassian.com/get-started Also add `typescript` to
|
|
191
|
+
`devDependencies` to denote version that the package was built with.
|
|
139
192
|
|
|
140
193
|
## 5.0.3
|
|
141
194
|
|
|
@@ -153,17 +206,22 @@
|
|
|
153
206
|
|
|
154
207
|
### Patch Changes
|
|
155
208
|
|
|
156
|
-
- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885)
|
|
209
|
+
- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885)
|
|
210
|
+
[`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded
|
|
211
|
+
to TypeScript 3.9.6 and tslib to 2.0.0
|
|
157
212
|
|
|
158
|
-
Since tslib is a dependency for all our packages we recommend that products also follow this tslib
|
|
159
|
-
to prevent duplicates of tslib being bundled.
|
|
213
|
+
Since tslib is a dependency for all our packages we recommend that products also follow this tslib
|
|
214
|
+
upgrade to prevent duplicates of tslib being bundled.
|
|
160
215
|
|
|
161
216
|
## 5.0.0
|
|
162
217
|
|
|
163
218
|
### Major Changes
|
|
164
219
|
|
|
165
|
-
- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335)
|
|
166
|
-
|
|
220
|
+
- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335)
|
|
221
|
+
[`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially
|
|
222
|
+
dropping IE11 support, from this version onwards there are no warranties of the package working in
|
|
223
|
+
IE11. For more information see:
|
|
224
|
+
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
|
|
167
225
|
|
|
168
226
|
### Patch Changes
|
|
169
227
|
|
|
@@ -183,7 +241,8 @@
|
|
|
183
241
|
|
|
184
242
|
- [patch][6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
|
|
185
243
|
|
|
186
|
-
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
|
|
244
|
+
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
|
|
245
|
+
[6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
|
|
187
246
|
|
|
188
247
|
- @atlaskit/docs@8.3.2
|
|
189
248
|
- @atlaskit/banner@10.1.5
|
|
@@ -196,7 +255,8 @@
|
|
|
196
255
|
|
|
197
256
|
### Patch Changes
|
|
198
257
|
|
|
199
|
-
- Updated dependencies
|
|
258
|
+
- Updated dependencies
|
|
259
|
+
[c0102a3ea2](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0102a3ea2):
|
|
200
260
|
- @atlaskit/icon@20.0.0
|
|
201
261
|
- @atlaskit/navigation@36.0.0
|
|
202
262
|
- @atlaskit/docs@8.3.1
|
|
@@ -213,7 +273,8 @@
|
|
|
213
273
|
|
|
214
274
|
### Patch Changes
|
|
215
275
|
|
|
216
|
-
- Updated dependencies
|
|
276
|
+
- Updated dependencies
|
|
277
|
+
[d2b8166208](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2b8166208):
|
|
217
278
|
- @atlaskit/docs@8.3.0
|
|
218
279
|
|
|
219
280
|
## 3.2.1
|
|
@@ -241,11 +302,13 @@
|
|
|
241
302
|
|
|
242
303
|
- [patch][097b696613](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/097b696613):
|
|
243
304
|
|
|
244
|
-
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving
|
|
305
|
+
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving
|
|
306
|
+
non-relative imports as relative imports
|
|
245
307
|
|
|
246
308
|
## 3.1.2
|
|
247
309
|
|
|
248
|
-
- Updated dependencies
|
|
310
|
+
- Updated dependencies
|
|
311
|
+
[06326ef3f7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/06326ef3f7):
|
|
249
312
|
- @atlaskit/docs@8.1.3
|
|
250
313
|
- @atlaskit/banner@10.0.4
|
|
251
314
|
- @atlaskit/button@13.0.9
|
|
@@ -254,7 +317,8 @@
|
|
|
254
317
|
|
|
255
318
|
## 3.1.1
|
|
256
319
|
|
|
257
|
-
- Updated dependencies
|
|
320
|
+
- Updated dependencies
|
|
321
|
+
[cfc3c8adb3](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cfc3c8adb3):
|
|
258
322
|
- @atlaskit/docs@8.1.2
|
|
259
323
|
- @atlaskit/button@13.0.8
|
|
260
324
|
- @atlaskit/navigation@35.1.5
|
|
@@ -266,17 +330,20 @@
|
|
|
266
330
|
|
|
267
331
|
- [minor][92a9ce6f80](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/92a9ce6f80):
|
|
268
332
|
|
|
269
|
-
- Added property `topOffset` to handle cases such as when we need to display banner above the
|
|
333
|
+
- Added property `topOffset` to handle cases such as when we need to display banner above the
|
|
334
|
+
mobile header
|
|
270
335
|
|
|
271
336
|
## 3.0.0
|
|
272
337
|
|
|
273
338
|
- [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
|
|
274
339
|
|
|
275
|
-
- Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
|
|
340
|
+
- Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
|
|
341
|
+
this package, please ensure you use at least this version of react and react-dom.
|
|
276
342
|
|
|
277
343
|
## 2.1.2
|
|
278
344
|
|
|
279
|
-
- Updated dependencies
|
|
345
|
+
- Updated dependencies
|
|
346
|
+
[9c0b4744be](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9c0b4744be):
|
|
280
347
|
- @atlaskit/docs@7.0.3
|
|
281
348
|
- @atlaskit/button@12.0.3
|
|
282
349
|
- @atlaskit/icon@16.0.9
|
|
@@ -285,7 +352,8 @@
|
|
|
285
352
|
|
|
286
353
|
## 2.1.1
|
|
287
354
|
|
|
288
|
-
- Updated dependencies
|
|
355
|
+
- Updated dependencies
|
|
356
|
+
[1e826b2966](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1e826b2966):
|
|
289
357
|
- @atlaskit/docs@7.0.2
|
|
290
358
|
- @atlaskit/icon@16.0.8
|
|
291
359
|
- @atlaskit/navigation@34.0.3
|
|
@@ -300,7 +368,8 @@
|
|
|
300
368
|
|
|
301
369
|
## 2.0.1
|
|
302
370
|
|
|
303
|
-
- Updated dependencies
|
|
371
|
+
- Updated dependencies
|
|
372
|
+
[9d5cc39394](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9d5cc39394):
|
|
304
373
|
- @atlaskit/docs@7.0.1
|
|
305
374
|
- @atlaskit/icon@16.0.5
|
|
306
375
|
- @atlaskit/navigation@34.0.1
|
|
@@ -315,8 +384,9 @@
|
|
|
315
384
|
|
|
316
385
|
### Dropping CJS support in all @atlaskit packages
|
|
317
386
|
|
|
318
|
-
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
|
|
319
|
-
|
|
387
|
+
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
|
|
388
|
+
distribute esm. This means all distributed code will be transpiled, but will still contain
|
|
389
|
+
`import` and `export` declarations.
|
|
320
390
|
|
|
321
391
|
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
|
|
322
392
|
|
|
@@ -330,19 +400,31 @@
|
|
|
330
400
|
import colors from `@atlaskit/theme/dist/esm/colors`;
|
|
331
401
|
```
|
|
332
402
|
|
|
333
|
-
This has a couple of issues. 1, it treats the file system as API making internal refactors harder,
|
|
403
|
+
This has a couple of issues. 1, it treats the file system as API making internal refactors harder,
|
|
404
|
+
we have to worry about how consumers might be using things that aren't _actually_ supposed to be
|
|
405
|
+
used. 2. We are unable to do this _internally_ in @atlaskit packages. This leads to lots of
|
|
406
|
+
packages bundling all of theme, just to use a single color, especially in situations where tree
|
|
407
|
+
shaking fails.
|
|
334
408
|
|
|
335
|
-
To support being able to use multiple entrypoints internally, we unfortunately cannot have
|
|
409
|
+
To support being able to use multiple entrypoints internally, we unfortunately cannot have
|
|
410
|
+
multiple distributions as they would need to have very different imports from of their own
|
|
411
|
+
internal dependencies.
|
|
336
412
|
|
|
337
|
-
ES Modules are widely supported by all modern bundlers and can be worked around in node
|
|
413
|
+
ES Modules are widely supported by all modern bundlers and can be worked around in node
|
|
414
|
+
environments.
|
|
338
415
|
|
|
339
|
-
We may choose to revisit this solution in the future if we find any unintended condequences, but
|
|
416
|
+
We may choose to revisit this solution in the future if we find any unintended condequences, but
|
|
417
|
+
we see this as a pretty sane path forward which should lead to some major bundle size decreases,
|
|
418
|
+
saner API's and simpler package architecture.
|
|
340
419
|
|
|
341
|
-
Please reach out to #fabric-build (if in Atlassian) or create an issue in
|
|
420
|
+
Please reach out to #fabric-build (if in Atlassian) or create an issue in
|
|
421
|
+
[Design System Support](https://ecosystem.atlassian.net/secure/CreateIssue.jspa?pid=24670) (for
|
|
422
|
+
external) if you have any questions or queries about this.
|
|
342
423
|
|
|
343
424
|
## 1.1.6
|
|
344
425
|
|
|
345
|
-
- Updated dependencies
|
|
426
|
+
- Updated dependencies
|
|
427
|
+
[d7ef59d432](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d7ef59d432):
|
|
346
428
|
- @atlaskit/docs@6.0.1
|
|
347
429
|
- @atlaskit/button@10.1.2
|
|
348
430
|
- @atlaskit/navigation@33.3.9
|
|
@@ -385,15 +467,18 @@
|
|
|
385
467
|
|
|
386
468
|
## 1.1.1
|
|
387
469
|
|
|
388
|
-
- [patch] Adds missing implicit @babel/runtime dependency
|
|
470
|
+
- [patch] Adds missing implicit @babel/runtime dependency
|
|
471
|
+
[b71751b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b71751b)
|
|
389
472
|
|
|
390
473
|
## 1.1.0
|
|
391
474
|
|
|
392
|
-
- [minor] changing pageHeading type so can internationalize it easier
|
|
475
|
+
- [minor] changing pageHeading type so can internationalize it easier
|
|
476
|
+
[6e688a9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6e688a9)
|
|
393
477
|
|
|
394
478
|
## 1.0.1
|
|
395
479
|
|
|
396
|
-
- [patch] Updated dependencies
|
|
480
|
+
- [patch] Updated dependencies
|
|
481
|
+
[65c6514](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/65c6514)
|
|
397
482
|
- @atlaskit/docs@5.0.8
|
|
398
483
|
- @atlaskit/button@9.0.13
|
|
399
484
|
- @atlaskit/navigation@33.1.11
|
|
@@ -402,6 +487,9 @@
|
|
|
402
487
|
## 1.0.0
|
|
403
488
|
|
|
404
489
|
- [patch] updated examples [edff5c9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/edff5c9)
|
|
405
|
-
- [major] Changed layout from position sticky to fixed and adjusted color contrast.
|
|
406
|
-
|
|
407
|
-
- [
|
|
490
|
+
- [major] Changed layout from position sticky to fixed and adjusted color contrast.
|
|
491
|
+
[1648676](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1648676)
|
|
492
|
+
- [patch] Added dark theme and addressed PR comments/tasks.
|
|
493
|
+
[de18390](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/de18390)
|
|
494
|
+
- [major] add mobile header component to atlaskit
|
|
495
|
+
[93a318a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/93a318a)
|
|
@@ -14,7 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
14
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
var
|
|
17
|
+
var _button = _interopRequireDefault(require("@atlaskit/button"));
|
|
18
18
|
var _menu = _interopRequireDefault(require("@atlaskit/icon/glyph/menu"));
|
|
19
19
|
var styles = _interopRequireWildcard(require("../styled"));
|
|
20
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); }
|
|
@@ -83,7 +83,7 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
|
|
|
83
83
|
topOffset = _this$props.topOffset;
|
|
84
84
|
var isNavigationOpen = drawerState === 'navigation';
|
|
85
85
|
var isSidebarOpen = drawerState === 'sidebar';
|
|
86
|
-
var menu = customMenu || /*#__PURE__*/_react.default.createElement(
|
|
86
|
+
var menu = customMenu || /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
87
87
|
appearance: "subtle",
|
|
88
88
|
iconBefore: /*#__PURE__*/_react.default.createElement(_menu.default, {
|
|
89
89
|
label: menuIconLabel,
|
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
|
+
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import React, { Fragment, PureComponent } from 'react';
|
|
3
|
-
import Button from '@atlaskit/button
|
|
3
|
+
import Button from '@atlaskit/button';
|
|
4
4
|
import MenuIcon from '@atlaskit/icon/glyph/menu';
|
|
5
5
|
import * as styles from '../styled';
|
|
6
6
|
class MobileHeader extends PureComponent {
|
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
|
+
});
|
|
@@ -8,7 +8,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
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
|
-
import Button from '@atlaskit/button
|
|
11
|
+
import Button from '@atlaskit/button';
|
|
12
12
|
import MenuIcon from '@atlaskit/icon/glyph/menu';
|
|
13
13
|
import * as styles from '../styled';
|
|
14
14
|
var MobileHeader = /*#__PURE__*/function (_PureComponent) {
|
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.11",
|
|
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.53.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
|
|