From a27106321e4054770fc0f3427e3186a31abce6e5 Mon Sep 17 00:00:00 2001 From: daviddecentage Date: Fri, 14 Mar 2025 13:40:15 +0100 Subject: [PATCH 1/4] init --- src/lib/components/Collapsible.svelte | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte index 2d1f2224a..15fd03e98 100644 --- a/src/lib/components/Collapsible.svelte +++ b/src/lib/components/Collapsible.svelte @@ -15,6 +15,7 @@ export let expandButton = true; export let externalToggle = false; export let wrapHeight = false; + export let offsetContent = false; // Minimum height when some part of the text-content is visible (empirical value) const CONTENT_MIN_HEIGHT = 40; @@ -97,6 +98,8 @@ role="definition" class="wrapper" class:expanded + class:offset-content={offsetContent && !maxContentHeight} + class:offset-content-scroll={offsetContent && maxContentHeight} style={`${maxHeightStyle(maxHeight)}${overflyYStyle(maxHeight)}`} >
From a484629c218953ea80e7e3bae11e052b5dc991b1 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 14 Mar 2025 12:51:46 +0000 Subject: [PATCH 2/4] Updating formatting --- src/lib/components/Collapsible.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte index 15fd03e98..0b7978a03 100644 --- a/src/lib/components/Collapsible.svelte +++ b/src/lib/components/Collapsible.svelte @@ -200,12 +200,14 @@ } } - .offset-content, .offset-content-scroll { + .offset-content, + .offset-content-scroll { &.wrapper { margin: 0 calc(var(--padding) * -1); } &.expanded { - margin: 0 calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1); + margin: 0 calc(var(--padding) * -1) calc(var(--padding) * -1) + calc(var(--padding) * -1); } .content { @@ -215,7 +217,8 @@ .offset-content-scroll { &.expanded { - margin: var(--padding) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1); + margin: var(--padding) calc(var(--padding) * -1) calc(var(--padding) * -1) + calc(var(--padding) * -1); } } From 616dd52d0eb6af637fc072e4b56580bf99259cf3 Mon Sep 17 00:00:00 2001 From: daviddecentage Date: Fri, 14 Mar 2025 14:04:09 +0100 Subject: [PATCH 3/4] updated docs --- src/lib/components/Collapsible.svelte | 2 +- .../(split)/components/collapsible/+page.md | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte index 15fd03e98..b156570fc 100644 --- a/src/lib/components/Collapsible.svelte +++ b/src/lib/components/Collapsible.svelte @@ -174,7 +174,7 @@ } .wrapper { - //margin-top: 0; + margin-top: 0; opacity: 0; visibility: hidden; diff --git a/src/routes/(split)/components/collapsible/+page.md b/src/routes/(split)/components/collapsible/+page.md index 819358d17..9978458cc 100644 --- a/src/routes/(split)/components/collapsible/+page.md +++ b/src/routes/(split)/components/collapsible/+page.md @@ -47,15 +47,16 @@ Collapsible is an accordion element that expands when clicked on. They allow you ## Properties -| Property | Description | Type | Default | -| ------------------ | --------------------------------------------------------------- | ----------------------- | ----------- | -| `id` | Corresponding id of the content element, for selection purposes | `string` or `undefined` | `undefined` | -| `initallyExpanded` | Initially collapsed or expanded | `boolean` | `false` | -| `maxContentHeight` | Optional height that defines the maximum content height | `number` or `undefined` | `undefined` | -| `iconSize` | Size of the icon: either `small` or `medium` | `string` | `small` | -| `expandButton` | Whether to include an expand button | `boolean` | `true` | -| `externalToggle` | To have an external toggle element | `boolean` | `false` | -| `wrapHeight` | To have wrapped height | `boolean` | `false` | +| Property | Description | Type | Default | +|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------|-------------| +| `id` | Corresponding id of the content element, for selection purposes | `string` or `undefined` | `undefined` | +| `initallyExpanded` | Initially collapsed or expanded | `boolean` | `false` | +| `maxContentHeight` | Optional height that defines the maximum content height | `number` or `undefined` | `undefined` | +| `iconSize` | Size of the icon: either `small` or `medium` | `string` | `small` | +| `expandButton` | Whether to include an expand button | `boolean` | `true` | +| `externalToggle` | To have an external toggle element | `boolean` | `false` | +| `wrapHeight` | To have wrapped height | `boolean` | `false` | +| `offsetContent` | Offset the content so that outlines and negative-margin positioned elements dont get cut off. This is mostly useful for buttons aligning directly on the content border and when they have focus outlines.

Note: The positioning of the content stays the same but theres a `--padding` width more room before `overflow: hidden` has any effect | `boolean` | `false` | ## Slots From 99376f0760b110f917e18321d4d1aeeb51b46985 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 14 Mar 2025 13:05:09 +0000 Subject: [PATCH 4/4] Updating formatting --- src/routes/(split)/components/collapsible/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(split)/components/collapsible/+page.md b/src/routes/(split)/components/collapsible/+page.md index 9978458cc..532cc8594 100644 --- a/src/routes/(split)/components/collapsible/+page.md +++ b/src/routes/(split)/components/collapsible/+page.md @@ -48,7 +48,7 @@ Collapsible is an accordion element that expands when clicked on. They allow you ## Properties | Property | Description | Type | Default | -|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------|-------------| +| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- | | `id` | Corresponding id of the content element, for selection purposes | `string` or `undefined` | `undefined` | | `initallyExpanded` | Initially collapsed or expanded | `boolean` | `false` | | `maxContentHeight` | Optional height that defines the maximum content height | `number` or `undefined` | `undefined` |