Skip to content

Commit 58c4acf

Browse files
danielwaltzdanielwaltz
committed
feat(core): update default z-index value to use computed property with fallback
1 parent a7dd473 commit 58c4acf

6 files changed

Lines changed: 55 additions & 63 deletions

File tree

‎packages/core/README.md‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -92,21 +92,19 @@ adhesive.cleanup();
9292

9393
#### Constructor Options
9494

95-
| Option | Type | Default | Description |
96-
| ------------------- | ------------------------------- | ---------------------- | ------------------------------------------ |
97-
| `targetEl` | `HTMLElement \| string` | Required | Element to make sticky or CSS selector |
98-
| `boundingEl` | `HTMLElement \| string \| null` | `document.body` | Container that defines sticky boundaries |
99-
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
100-
| `offset` | `number` | `0` | Offset in pixels from the position |
101-
| `zIndex` | `number` \| `string` | `1` | Z-index for the fixed element |
102-
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
103-
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
104-
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
105-
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
106-
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
107-
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
108-
109-
> Note: `zIndex` also accepts a CSS variable string, e.g. `"var(--adhesive-z)"`.
95+
| Option | Type | Default | Description |
96+
| ------------------- | ------------------------------- | ---------------------------- | ------------------------------------------ |
97+
| `targetEl` | `HTMLElement \| string` | Required | Element to make sticky or CSS selector |
98+
| `boundingEl` | `HTMLElement \| string \| null` | `document.body` | Container that defines sticky boundaries |
99+
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
100+
| `offset` | `number` | `0` | Offset in pixels from the position |
101+
| `zIndex` | `number` \| `string` | `var(--adhesive-z-index, 1)` | Z-index for the fixed element |
102+
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
103+
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
104+
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
105+
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
106+
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
107+
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
110108

111109
#### Methods
112110

‎packages/core/src/lib/Adhesive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export interface AdhesiveOptions {
5959
readonly position?: AdhesivePosition;
6060
/**
6161
* CSS z-index for the sticky element.
62-
* @default 1
62+
* @default "var(--adhesive-z-index, 1)"
6363
*/
6464
readonly zIndex?: number | string;
6565
/**
@@ -164,9 +164,9 @@ export class AdhesiveError extends Error {
164164

165165
const DEFAULT_OPTIONS = {
166166
enabled: true as boolean,
167-
offset: 0 as number,
167+
offset: 0,
168168
position: ADHESIVE_POSITION.TOP as AdhesivePosition,
169-
zIndex: 1 as number,
169+
zIndex: "var(--adhesive-z-index, 1)",
170170
outerClassName: "adhesive__outer",
171171
innerClassName: "adhesive__inner",
172172
initialClassName: "adhesive--initial",

‎packages/react/README.md‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -135,18 +135,16 @@ For more control over the sticky behavior.
135135

136136
**UseAdhesiveOptions:**
137137

138-
| Option | Type | Default | Description |
139-
| ------------------- | ---------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
140-
| `boundingRef` | `React.RefObject` \| `HTMLElement` \| `string` | `document.body` | The element that defines the sticky boundaries |
141-
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | Alternative way to specify bounding element (for compatibility) |
142-
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
143-
| `offset` | `number` | `0` | Offset in pixels from the position |
144-
| `zIndex` | `number` \| `string` | `1` | Z-index for the fixed element |
145-
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
146-
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
147-
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
148-
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
149-
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
150-
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
151-
152-
> Note: `zIndex` also accepts a CSS variable string, e.g. `"var(--adhesive-z)"`.
138+
| Option | Type | Default | Description |
139+
| ------------------- | ---------------------------------------------- | ---------------------------- | --------------------------------------------------------------- |
140+
| `boundingRef` | `React.RefObject` \| `HTMLElement` \| `string` | `document.body` | The element that defines the sticky boundaries |
141+
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | Alternative way to specify bounding element (for compatibility) |
142+
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
143+
| `offset` | `number` | `0` | Offset in pixels from the position |
144+
| `zIndex` | `number` \| `string` | `var(--adhesive-z-index, 1)` | Z-index for the fixed element |
145+
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
146+
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
147+
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
148+
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
149+
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
150+
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |

‎packages/svelte/README.md‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -103,20 +103,18 @@ A Svelte attachment that applies sticky positioning to elements with advanced co
103103

104104
**AdhesiveAttachmentOptions:**
105105

106-
| Option | Type | Default | Description |
107-
| ------------------- | ------------------------- | ---------------------- | ---------------------------------------------- |
108-
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | The element that defines the sticky boundaries |
109-
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
110-
| `offset` | `number` | `0` | Offset in pixels from the position |
111-
| `zIndex` | `number` \| `string` | `1` | Z-index for the fixed element |
112-
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
113-
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
114-
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
115-
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
116-
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
117-
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
118-
119-
> Note: `zIndex` also accepts a CSS variable string, e.g. `"var(--adhesive-z)"`.
106+
| Option | Type | Default | Description |
107+
| ------------------- | ------------------------- | ---------------------------- | ---------------------------------------------- |
108+
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | The element that defines the sticky boundaries |
109+
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
110+
| `offset` | `number` | `0` | Offset in pixels from the position |
111+
| `zIndex` | `number` \| `string` | `var(--adhesive-z-index, 1)` | Z-index for the fixed element |
112+
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
113+
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
114+
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
115+
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
116+
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
117+
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
120118

121119
**Usage:**
122120

‎packages/vue/README.md‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -217,20 +217,18 @@ For more control over the sticky behavior with full Vue reactivity support.
217217

218218
**UseAdhesiveOptions:**
219219

220-
| Option | Type | Default | Description |
221-
| ------------------- | ------------------------- | ---------------------- | -------------------------------------------------------- |
222-
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | The container element that constrains sticky positioning |
223-
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
224-
| `offset` | `number` | `0` | Offset in pixels from the position |
225-
| `zIndex` | `number` \| `string` | `1` | Z-index for the fixed element |
226-
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
227-
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
228-
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
229-
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
230-
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
231-
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
232-
233-
> Note: `zIndex` also accepts a CSS variable string, e.g. `"var(--adhesive-z)"`.
220+
| Option | Type | Default | Description |
221+
| ------------------- | ------------------------- | ---------------------------- | -------------------------------------------------------- |
222+
| `boundingEl` | `HTMLElement` \| `string` | `document.body` | The container element that constrains sticky positioning |
223+
| `position` | `'top' \| 'bottom'` | `'top'` | Where the element should stick |
224+
| `offset` | `number` | `0` | Offset in pixels from the position |
225+
| `zIndex` | `number` \| `string` | `var(--adhesive-z-index, 1)` | Z-index for the fixed element |
226+
| `enabled` | `boolean` | `true` | Whether to enable sticky behavior |
227+
| `outerClassName` | `string` | `'adhesive__outer'` | Class for the outer wrapper |
228+
| `innerClassName` | `string` | `'adhesive__inner'` | Class for the inner wrapper |
229+
| `initialClassName` | `string` | `'adhesive--initial'` | Class when element is in its initial state |
230+
| `fixedClassName` | `string` | `'adhesive--fixed'` | Class when element is sticky |
231+
| `relativeClassName` | `string` | `'adhesive--relative'` | Class when element reaches its boundary |
234232

235233
#### `v-adhesive` Directive
236234

‎test/unit/core.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1605,7 +1605,7 @@ describe("Core", () => {
16051605
};
16061606
const fixedInnerStyles = {
16071607
position: "fixed",
1608-
zIndex: "1",
1608+
zIndex: "var(--adhesive-z-index, 1)",
16091609
transform: "",
16101610
width: "100px",
16111611
top: "0px",
@@ -1615,7 +1615,7 @@ describe("Core", () => {
16151615
const relativeOuterStyles = {};
16161616
const relativeInnerStyles = {
16171617
position: "relative",
1618-
zIndex: "1",
1618+
zIndex: "var(--adhesive-z-index, 1)",
16191619
transform: "translate3d(0, 1850px, 0)",
16201620
};
16211621

0 commit comments

Comments
 (0)