Skip to content

Commit b076cfb

Browse files
WombosvideoWombosvideo
committed
docs: fix various issues in accordion and collapsible docs
1 parent 03e5f12 commit b076cfb

File tree

3 files changed

+56
-17
lines changed

3 files changed

+56
-17
lines changed

‎README.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -142,13 +142,13 @@ To customize the animation parameters, use the following classes:
142142

143143
### Ready-to-Use Animations
144144

145-
| Class | Description |
146-
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
147-
| [`accordion-down`][Docs_Accordion] | Accordion down animation. Requires one of `--radix-accordion-content-height`, `--bits-accordion-content-height`, `--reka-accordion-content-height` or `--kb-accordion-content-height` to be set to the content's height. |
148-
| [`accordion-up`][Docs_Accordion] | Accordion up animation. Requires one of `--radix-accordion-content-height`, `--bits-accordion-content-height`, `--reka-accordion-content-height` or `--kb-accordion-content-height` to be set to the content's height. |
149-
| [`collapsible-down`][Docs_Collapsible] | Collapsible down animation. Requires `--radix-collapsible-content-height`, `--bits-collapsible-content-height`, `--reka-collapsible-content-height` or `--kb-collapsible-content-height` to be set to the content's height. |
150-
| [`collapsible-up`][Docs_Collapsible] | Collapsible up animation. Requires `--radix-collapsible-content-height`, `--bits-collapsible-content-height`, `--reka-collapsible-content-height` or `--kb-collapsible-content-height` to be set to the content's height. |
151-
| [`caret-blink`][Docs_Caret] | Blinking animation for caret/cursor. |
145+
| Class | Description |
146+
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
147+
| [`accordion-down`][Docs_Accordion] | Accordion down animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |
148+
| [`accordion-up`][Docs_Accordion] | Accordion up animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |
149+
| [`collapsible-down`][Docs_Collapsible] | Collapsible down animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |
150+
| [`collapsible-up`][Docs_Collapsible] | Collapsible up animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |
151+
| [`caret-blink`][Docs_Caret] | Blinking animation for caret/cursor. |
152152

153153
By the way, if you don't use some of the above animations, they will not be included in the final CSS file. This is because Tailwind CSS kind of does tree-shaking for you. So, if you don't use `accordion-down`, it won't be included in the final CSS file.
154154

@@ -215,7 +215,9 @@ By the way, if you don't use some of the above animations, they will not be incl
215215
[Docs_Spin]: ./docs/transforms/rotate.md
216216
[Docs_Slide]: ./docs/transforms/translate.md
217217
[Docs_Accordion]: ./docs/animations/accordion.md
218+
[Docs_Accordion_Content_Height]: ./docs/animations/accordion.md#setting-content-height
218219
[Docs_Collapsible]: ./docs/animations/collapsible.md
220+
[Docs_Collapsible_Content_Height]: ./docs/animations/collapsible.md#setting-content-height
219221
[Docs_Caret]: ./docs/animations/caret-blink.md
220222
[MDN_Duration]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
221223
[MDN_Ease]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

‎docs/animations/accordion.md‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,13 @@ animation: accordion-down var(--tw-duration, 200ms) ease-out;
3333
to {
3434
height: var(
3535
--radix-accordion-content-height,
36-
var(--bits-accordion-content-height, var(--reka-accordion-content-height, auto))
36+
var(
37+
--bits-accordion-content-height,
38+
var(
39+
--reka-accordion-content-height,
40+
var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
41+
)
42+
)
3743
);
3844
}
3945
}
@@ -74,7 +80,13 @@ animation: accordion-up var(--tw-duration, 200ms) ease-out;
7480
from {
7581
height: var(
7682
--radix-accordion-content-height,
77-
var(--bits-accordion-content-height, var(--reka-accordion-content-height, auto))
83+
var(
84+
--bits-accordion-content-height,
85+
var(
86+
--reka-accordion-content-height,
87+
var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
88+
)
89+
)
7890
);
7991
}
8092
to {
@@ -95,8 +107,8 @@ Until browser support for [`interpolate-size: allow-keywords`][MDN_Interpolate_S
95107
- `--radix-accordion-content-height` as in the [Radix documentation][Radix_Docs]
96108
- `--bits-accordion-content-height` as in the [BitsUI documentation][Bits_Docs]
97109
- `--reka-accordion-content-height` as in the [Reka documentation][Reka_Docs]
98-
99-
Check out the [setting content height](#setting-content-height) section for more information.
110+
- `--kb-accordion-content-height` as in the [Kobalte documentation][Kobalte_Docs]
111+
- `--ngp-accordion-content-height` as in the [Angular Primitives documentation][Angular_Primitives_Docs]
100112

101113
### HTML
102114

@@ -183,7 +195,7 @@ import {
183195

184196
Learn more about Reka's accordion primitive in the [Reka documentation][Reka_Docs].
185197

186-
### Using Kobalte
198+
### Using Kobalte (SolidJS)
187199

188200
Kobalte automatically sets the `--kb-accordion-content-height` variable. Just use the headless accordion component primitive!
189201

@@ -204,10 +216,30 @@ export default () => (
204216

205217
Learn more about Kobalte's accordion primitive in the [Kobalte documentation][Kobalte_Docs].
206218

219+
### Using Angular Primitives (Angular)
220+
221+
Angular Primitives automatically sets the `--ngp-accordion-content-height` variable. Just use the headless accordion component primitive!
222+
223+
```jsx
224+
<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
225+
<div ngpAccordionItem ngpAccordionItemValue="...">
226+
<h3>
227+
<button ngpAccordionTrigger ngpButton>
228+
...
229+
</button>
230+
</h3>
231+
<div ngpAccordionContent>...</div>
232+
</div>
233+
</div>
234+
```
235+
236+
Learn more about Angular Primitives' accordion primitive in the [Angular Primitives documentation][Angular_Primitives_Docs].
237+
207238
<!-- Links -->
208239

209240
[MDN_Interpolate_Size]: https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size
210241
[Radix_Docs]: https://radix-ui.com/docs/primitives/components/accordion#content
211242
[Bits_Docs]: https://bits-ui.com/docs/components/accordion#content
212243
[Reka_Docs]: https://reka-ui.com/docs/components/accordion#content
213244
[Kobalte_Docs]: https://kobalte.dev/docs/core/components/accordion#animating-content-size
245+
[Angular_Primitives_Docs]: https://angularprimitives.com/primitives/accordion#ngpaccordioncontent

‎docs/animations/collapsible.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ animation: collapsible-down var(--tw-duration, 200ms) ease-out;
3333
to {
3434
height: var(
3535
--radix-collapsible-content-height,
36-
var(--bits-collapsible-content-height, var(--reka-collapsible-content-height, auto))
36+
var(
37+
--bits-collapsible-content-height,
38+
var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
39+
)
3740
);
3841
}
3942
}
@@ -74,7 +77,10 @@ animation: collapsible-up var(--tw-duration, 200ms) ease-out;
7477
from {
7578
height: var(
7679
--radix-collapsible-content-height,
77-
var(--bits-collapsible-content-height, var(--reka-collapsible-content-height, auto))
80+
var(
81+
--bits-collapsible-content-height,
82+
var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
83+
)
7884
);
7985
}
8086
to {
@@ -95,8 +101,7 @@ Until browser support for [`interpolate-size: allow-keywords`][MDN_Interpolate_S
95101
- `--radix-collapsible-content-height` as in the [Radix documentation][Radix_Docs]
96102
- `--bits-collapsible-content-height` as in the [BitsUI documentation][Bits_Docs]
97103
- `--reka-collapsible-content-height` as in the [Reka documentation][Reka_Docs]
98-
99-
Check out the [setting content height](#setting-content-height) section for more information.
104+
- `--kb-collapsible-content-height` as in the [Kobalte documentation][Kobalte_Docs]
100105

101106
### HTML
102107

@@ -165,7 +170,7 @@ import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui
165170

166171
Learn more about Reka's collapsible primitive in the [Reka documentation][Reka_Docs].
167172

168-
### Using Kobalte
173+
### Using Kobalte (SolidJS)
169174

170175
Kobalte automatically sets the `--kb-collapsible-content-height` variable. Just use the headless collapsible component primitive!
171176

0 commit comments

Comments
 (0)