Skip to content

feat: Collapsible content new prop to avoid overflow hidden #603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: Collapsible content new prop to avoid overflow hidden #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a271063
init
daviddecentage Mar 14, 2025
a484629
Updating formatting
github-actions[bot] Mar 14, 2025
616dd52
updated docs
daviddecentage Mar 14, 2025
9639955
Merge remote-tracking branch 'origin/feat/collapsible-content-avoid-o…
daviddecentage Mar 14, 2025
99376f0
Updating formatting
github-actions[bot] Mar 14, 2025
9639c9d
Merge branch 'main' into feat/collapsible-content-avoid-overflow-hidden
daviddecentage Mar 14, 2025
3ecf87d
Merge branch 'main' into feat/collapsible-content-avoid-overflow-hidden
AntonioVentilii May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/lib/components/Collapsible.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)}`}
>
<div
Expand Down Expand Up @@ -196,4 +199,26 @@
padding-bottom: var(--padding);
}
}

.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);
}

.content {
padding: var(--padding);
}
}

.offset-content-scroll {
&.expanded {
margin: var(--padding) calc(var(--padding) * -1) calc(var(--padding) * -1)
calc(var(--padding) * -1);
}
}
</style>
19 changes: 10 additions & 9 deletions src/routes/(split)/components/collapsible/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.<br/><br/><b>Note:</b> The positioning of the content stays the same but theres a `--padding` width more room before `overflow: hidden` has any effect | `boolean` | `false` |

## Slots

Expand Down