@atlaskit/top-layer 0.1.4 → 0.1.5
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 +8 -0
- package/dist/cjs/arrow/index.js +2 -2
- package/dist/cjs/internal/use-anchor-positioning.js +1 -1
- package/dist/es2019/arrow/index.js +2 -2
- package/dist/es2019/internal/use-anchor-positioning.js +1 -1
- package/dist/esm/arrow/index.js +2 -2
- package/dist/esm/internal/use-anchor-positioning.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/top-layer
|
|
2
2
|
|
|
3
|
+
## 0.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`034e29787df79`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/034e29787df79) -
|
|
8
|
+
Fix arrow tips being squared off instead of coming to a point by changing clip-path inset from 1px
|
|
9
|
+
to 0px
|
|
10
|
+
|
|
3
11
|
## 0.1.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/dist/cjs/arrow/index.js
CHANGED
|
@@ -13,7 +13,7 @@ var _useAnchorPositioning = require("../internal/use-anchor-positioning");
|
|
|
13
13
|
* How it works:
|
|
14
14
|
* 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
|
|
15
15
|
* `::after` (left/right) hexagonal pseudo-elements.
|
|
16
|
-
* 2. `clip-path: inset(
|
|
16
|
+
* 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
|
|
17
17
|
* 3. Margin on the anchor-facing side pushes the popover away, creating space
|
|
18
18
|
* where one arrow "escapes" the clip boundary and becomes visible.
|
|
19
19
|
* 4. `@position-try` rules change both `position-area` and `margin` when
|
|
@@ -26,7 +26,7 @@ var _useAnchorPositioning = require("../internal/use-anchor-positioning");
|
|
|
26
26
|
*
|
|
27
27
|
* @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
|
|
28
28
|
*/
|
|
29
|
-
var ARROW_CSS = "\n[data-ds-popover-arrow] {\n clip-path: inset(var(--ds-arrow-offset,
|
|
29
|
+
var ARROW_CSS = "\n[data-ds-popover-arrow] {\n clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: inherit;\n left: 50%;\n transform: translateX(-50%);\n width: calc(var(--ds-arrow-size, 8px) * 2);\n height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n top: calc(var(--ds-arrow-size, 8px) * -1);\n clip-path: polygon(\n 0 var(--ds-arrow-size, 8px),\n 50% 0,\n 100% var(--ds-arrow-size, 8px),\n 100% calc(100% - var(--ds-arrow-size, 8px)),\n 50% 100%,\n 0 calc(100% - var(--ds-arrow-size, 8px))\n );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: inherit;\n top: 50%;\n transform: translateY(-50%);\n height: calc(var(--ds-arrow-size, 8px) * 2);\n width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n left: calc(var(--ds-arrow-size, 8px) * -1);\n clip-path: polygon(\n var(--ds-arrow-size, 8px) 0,\n calc(100% - var(--ds-arrow-size, 8px)) 0,\n 100% 50%,\n calc(100% - var(--ds-arrow-size, 8px)) 100%,\n var(--ds-arrow-size, 8px) 100%,\n 0 50%\n );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n * block-start (above anchor) \u2192 margin-block-end (bottom, facing anchor)\n * block-end (below anchor) \u2192 margin-block-start (top, facing anchor)\n * inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n * inline-end (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n position-area: block-start;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n position-area: block-end;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n position-area: inline-start;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n position-area: inline-end;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n position-area: block-start span-inline-start;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n position-area: block-start span-inline-end;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n position-area: block-end span-inline-start;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n position-area: block-end span-inline-end;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n position-area: inline-start span-block-start;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n position-area: inline-start span-block-end;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n position-area: inline-end span-block-start;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n position-area: inline-end span-block-end;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
|
|
30
30
|
|
|
31
31
|
// ── Placement utilities ──
|
|
32
32
|
|
|
@@ -240,7 +240,7 @@ function useAnchorPosition(_ref4) {
|
|
|
240
240
|
value: "".concat(offset, "px")
|
|
241
241
|
});
|
|
242
242
|
// Mark the popover root as the arrow host. The ARROW_CSS targets
|
|
243
|
-
// [data-ds-popover-arrow] to apply clip-path: inset(
|
|
243
|
+
// [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
|
|
244
244
|
// and box-shadow: none. Must be on the popover root (not a child)
|
|
245
245
|
// because that's where useAnchorPosition sets the margin gap.
|
|
246
246
|
popover.setAttribute('data-ds-popover-arrow', '');
|
|
@@ -6,7 +6,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
|
|
|
6
6
|
* How it works:
|
|
7
7
|
* 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
|
|
8
8
|
* `::after` (left/right) hexagonal pseudo-elements.
|
|
9
|
-
* 2. `clip-path: inset(
|
|
9
|
+
* 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
|
|
10
10
|
* 3. Margin on the anchor-facing side pushes the popover away, creating space
|
|
11
11
|
* where one arrow "escapes" the clip boundary and becomes visible.
|
|
12
12
|
* 4. `@position-try` rules change both `position-area` and `margin` when
|
|
@@ -21,7 +21,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
|
|
|
21
21
|
*/
|
|
22
22
|
const ARROW_CSS = `
|
|
23
23
|
[data-ds-popover-arrow] {
|
|
24
|
-
clip-path: inset(var(--ds-arrow-offset,
|
|
24
|
+
clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;
|
|
25
25
|
box-shadow: none;
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -233,7 +233,7 @@ export function useAnchorPosition({
|
|
|
233
233
|
value: `${offset}px`
|
|
234
234
|
});
|
|
235
235
|
// Mark the popover root as the arrow host. The ARROW_CSS targets
|
|
236
|
-
// [data-ds-popover-arrow] to apply clip-path: inset(
|
|
236
|
+
// [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
|
|
237
237
|
// and box-shadow: none. Must be on the popover root (not a child)
|
|
238
238
|
// because that's where useAnchorPosition sets the margin gap.
|
|
239
239
|
popover.setAttribute('data-ds-popover-arrow', '');
|
package/dist/esm/arrow/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
|
|
|
6
6
|
* How it works:
|
|
7
7
|
* 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
|
|
8
8
|
* `::after` (left/right) hexagonal pseudo-elements.
|
|
9
|
-
* 2. `clip-path: inset(
|
|
9
|
+
* 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
|
|
10
10
|
* 3. Margin on the anchor-facing side pushes the popover away, creating space
|
|
11
11
|
* where one arrow "escapes" the clip boundary and becomes visible.
|
|
12
12
|
* 4. `@position-try` rules change both `position-area` and `margin` when
|
|
@@ -19,7 +19,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
|
|
|
19
19
|
*
|
|
20
20
|
* @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
|
|
21
21
|
*/
|
|
22
|
-
var ARROW_CSS = "\n[data-ds-popover-arrow] {\n clip-path: inset(var(--ds-arrow-offset,
|
|
22
|
+
var ARROW_CSS = "\n[data-ds-popover-arrow] {\n clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: inherit;\n left: 50%;\n transform: translateX(-50%);\n width: calc(var(--ds-arrow-size, 8px) * 2);\n height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n top: calc(var(--ds-arrow-size, 8px) * -1);\n clip-path: polygon(\n 0 var(--ds-arrow-size, 8px),\n 50% 0,\n 100% var(--ds-arrow-size, 8px),\n 100% calc(100% - var(--ds-arrow-size, 8px)),\n 50% 100%,\n 0 calc(100% - var(--ds-arrow-size, 8px))\n );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: inherit;\n top: 50%;\n transform: translateY(-50%);\n height: calc(var(--ds-arrow-size, 8px) * 2);\n width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n left: calc(var(--ds-arrow-size, 8px) * -1);\n clip-path: polygon(\n var(--ds-arrow-size, 8px) 0,\n calc(100% - var(--ds-arrow-size, 8px)) 0,\n 100% 50%,\n calc(100% - var(--ds-arrow-size, 8px)) 100%,\n var(--ds-arrow-size, 8px) 100%,\n 0 50%\n );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n * block-start (above anchor) \u2192 margin-block-end (bottom, facing anchor)\n * block-end (below anchor) \u2192 margin-block-start (top, facing anchor)\n * inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n * inline-end (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n position-area: block-start;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n position-area: block-end;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n position-area: inline-start;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n position-area: inline-end;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n position-area: block-start span-inline-start;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n position-area: block-start span-inline-end;\n margin: 0;\n margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n position-area: block-end span-inline-start;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n position-area: block-end span-inline-end;\n margin: 0;\n margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n position-area: inline-start span-block-start;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n position-area: inline-start span-block-end;\n margin: 0;\n margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n position-area: inline-end span-block-start;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n position-area: inline-end span-block-end;\n margin: 0;\n margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
|
|
23
23
|
|
|
24
24
|
// ── Placement utilities ──
|
|
25
25
|
|
|
@@ -227,7 +227,7 @@ export function useAnchorPosition(_ref4) {
|
|
|
227
227
|
value: "".concat(offset, "px")
|
|
228
228
|
});
|
|
229
229
|
// Mark the popover root as the arrow host. The ARROW_CSS targets
|
|
230
|
-
// [data-ds-popover-arrow] to apply clip-path: inset(
|
|
230
|
+
// [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
|
|
231
231
|
// and box-shadow: none. Must be on the popover root (not a child)
|
|
232
232
|
// because that's where useAnchorPosition sets the margin gap.
|
|
233
233
|
popover.setAttribute('data-ds-popover-arrow', '');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/top-layer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
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",
|