@atlaskit/top-layer 0.10.0 → 0.11.0

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +3 -3
  3. package/dist/cjs/animations/presets.js +3 -1
  4. package/dist/es2019/animations/presets.js +14 -2
  5. package/dist/esm/animations/presets.js +3 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/top-layer
2
2
 
3
+ ## 0.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c54bd48a31fbb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c54bd48a31fbb) -
8
+ The slide and fade animation now supports right-to-left text direction.
9
+
3
10
  ## 0.10.0
4
11
 
5
12
  ### Minor Changes
package/README.md CHANGED
@@ -21,9 +21,9 @@ Positioning or JS fallback).
21
21
  </Popup>
22
22
  ```
23
23
 
24
- `placement` defaults to `{}` - "below trigger, centered, with `space.100` gap".
25
- Pass an explicit object to override (e.g. `placement={{ axis: 'inline', edge: 'end' }}`
26
- for a popover anchored to the trigger's right edge).
24
+ `placement` defaults to `{}` - "below trigger, centered, with `space.100` gap". Pass an explicit
25
+ object to override (e.g. `placement={{ axis: 'inline', edge: 'end' }}` for a popover anchored to the
26
+ trigger's right edge).
27
27
 
28
28
  For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package
29
29
  examples (not currently a public API; we may expose it in a future release).
package/dist/cjs/animations/presets.js CHANGED
@@ -50,7 +50,9 @@ function getSlideAndFadeProperties(_ref) {
50
50
  '--ds-popover-ty': neg
51
51
  };
52
52
  }
53
- var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n opacity: 0;\n transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-slide-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-slide-and-fade]:popover-open {\n opacity: 0;\n transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-slide-and-fade],\n [data-ds-popover-slide-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
53
+
54
+ // ℹ️ Note: The `transform` x value is flipped in right-to-left mode using the `[dir='rtl']` selector.
55
+ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n opacity: 0;\n transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[dir='rtl'] [data-ds-popover-slide-and-fade] {\n transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n}\n\n[data-ds-popover-slide-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-slide-and-fade]:popover-open {\n opacity: 0;\n transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n }\n}\n\n@starting-style {\n [dir='rtl'] [data-ds-popover-slide-and-fade]:popover-open {\n transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-slide-and-fade],\n [data-ds-popover-slide-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
54
56
 
55
57
  /**
56
58
  * Directional slide + opacity animation.
package/dist/es2019/animations/presets.js CHANGED
@@ -43,10 +43,12 @@ function getSlideAndFadeProperties({
43
43
  '--ds-popover-ty': neg
44
44
  };
45
45
  }
46
+
47
+ // ℹ️ Note: The `transform` x value is flipped in right-to-left mode using the `[dir='rtl']` selector.
46
48
  const SLIDE_AND_FADE_CSS = `
47
49
  [data-ds-popover-slide-and-fade] {
48
50
  opacity: 0;
49
- transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);
51
+ transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));
50
52
  transition:
51
53
  opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
52
54
  transform 175ms cubic-bezier(0.15, 1, 0.3, 1),
@@ -54,6 +56,10 @@ const SLIDE_AND_FADE_CSS = `
54
56
  display 175ms allow-discrete;
55
57
  }
56
58
 
59
+ [dir='rtl'] [data-ds-popover-slide-and-fade] {
60
+ transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));
61
+ }
62
+
57
63
  [data-ds-popover-slide-and-fade]:popover-open {
58
64
  opacity: 1;
59
65
  transform: none;
@@ -63,7 +69,13 @@ const SLIDE_AND_FADE_CSS = `
63
69
  @starting-style {
64
70
  [data-ds-popover-slide-and-fade]:popover-open {
65
71
  opacity: 0;
66
- transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);
72
+ transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));
73
+ }
74
+ }
75
+
76
+ @starting-style {
77
+ [dir='rtl'] [data-ds-popover-slide-and-fade]:popover-open {
78
+ transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));
67
79
  }
68
80
  }
69
81
 
package/dist/esm/animations/presets.js CHANGED
@@ -41,7 +41,9 @@ function getSlideAndFadeProperties(_ref) {
41
41
  '--ds-popover-ty': neg
42
42
  };
43
43
  }
44
- var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n opacity: 0;\n transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-slide-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-slide-and-fade]:popover-open {\n opacity: 0;\n transform: translate3d(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0), 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-slide-and-fade],\n [data-ds-popover-slide-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
44
+
45
+ // ℹ️ Note: The `transform` x value is flipped in right-to-left mode using the `[dir='rtl']` selector.
46
+ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n opacity: 0;\n transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[dir='rtl'] [data-ds-popover-slide-and-fade] {\n transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n}\n\n[data-ds-popover-slide-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-slide-and-fade]:popover-open {\n opacity: 0;\n transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n }\n}\n\n@starting-style {\n [dir='rtl'] [data-ds-popover-slide-and-fade]:popover-open {\n transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-slide-and-fade],\n [data-ds-popover-slide-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
45
47
 
46
48
  /**
47
49
  * Directional slide + opacity animation.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/top-layer",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "description": "Low-level layering primitives based on popover and dialog",
5
5
  "homepage": "https://atlassian.design/components/top-layer",
6
6
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",