Widget collapsible

[YooSunYoung]

Fixes #2918

I'm opening a draft PR to have feedback on the current implementation.
There are a few ideas I have.
@rodrigogiraoserrao Can you please comment on these ideas if they are necessary and the suitable approaches...?

TODO? list:

• Adjust gap between contents. (with CSS?)
• Wrap contents within one container.
• Expose collapsed as a reactivity handle.

Example application: docs/examples/widgets/collapsible.py

---

Please review the following checklist.

• Docstrings on all new or modified functions/classes
• Updated documentation
• Updated CHANGELOG.md (where appropriate)

[rodrigogiraoserrao]

Hey! I think you are definitely going in the right direction!
I think all 3 todo items make a lot of sense. In particular, if you wrap the contents of the collapsible in a container, it should be easy to fix the gaps and it would be much easier to remove things from the screen because you only need to change the display of the parent container.

[YooSunYoung]

Just sending a heartbeat...!
I returned to my normal work/life schedule again, so I'll be able to continue from this evening...!
If I'm too slow, you can also continue without me 🥲......

[rodrigogiraoserrao]

Just sending a heartbeat...!
I returned to my normal work/life schedule again, so I'll be able to continue from this evening...!
If I'm too slow, you can also continue without me 🥲......

No worries; this is something we really want to see implemented but we can give you some time to finish working on it!
Let us know if you get stuck and join us on the Textual Discord Server if you need more direct help: https://discord.gg/Enf6Z3qhVr
(There are also other folks there who play a lot with Textual who might be able to help.)

[YooSunYoung]

Hi, @rodrigogiraoserrao...! Sorry for the late update!
I finished the implementation and tried adding documentation and tests as well.
Can you please review them...?? : D

[rodrigogiraoserrao]

This is looking great! I ran the examples locally and the Collapsible is in a really good state!

I left a couple of comments in the PR.
I would also like to request that you take the example app in docs/examples/widgets/collapsible.py and make a snapshot test out of it.
There should be instructions on how to do so in this issue: #2923

Finally, sorry for taking so long to go over this.
I was away last week!

[rodrigogiraoserrao]

You followed the structure of the documentation well and added good examples.
However, I'd like to polish the English sentences a bit more.

Would you like to have another go at them, or would you prefer I go over them and make concrete change suggestions?

[YooSunYoung]

Thank you...!
I fixed some weird sentences but it'd be better if you make suggestions as well : D...!

[rodrigogiraoserrao]

You're on the right track!

I was also looking at your sections where you explain how to change the title, the collapsed state, etc.
Now that you have the tests that cover everything, you also have apps that show how all of that is done, correct?

Take a look at the Button documentation: https://textual.textualize.io/widgets/button/#example
The “Example” section has a couple of tabs with an app screenshot and the code for an app.
That's created by this syntax:

textual/docs/widgets/button.md

Lines 15 to 30 in c1b611b

	=== "Output"
	```{.textual path="docs/examples/widgets/button.py"}
	```
	=== "button.py"
	```python
	--8<-- "docs/examples/widgets/button.py"
	```
	=== "button.css"
	```sass
	--8<-- "docs/examples/widgets/button.css"
	```

Now that you have example apps for all of that (because of the screenshot tests) you can also add them to the documentation directly!

So, you can essentially move your sections inside the example, and automatically include screenshots of the apps so that people see the changes.

How does this sound?
If this sounds like a good idea, you can try to do it.

You can use the command make docs-serve-offline to build the documentation and see it live, which should help you make sure the screenshots are ending up where they need to be.

Finally, inside that funny syntax {.textual path="..."} you can also add press="key1,key2,..." to press keys before the screenshot.
For example, {.textual path="path/to/my/app.py" press="e,a,enter"} would press the keys E, A, Enter before taking the screenshot.

[YooSunYoung]

I think I understood what you mean! I will re-organize them again after work.... thanks...!

[YooSunYoung]

Finally, sorry for taking so long to go over this.
No worries at all! Thank you for reviewing!

[rodrigogiraoserrao]

Thank you for reviewing!

Of course, @YooSunYoung! I'll wait for you to add the snapshot tests (by the way, you can take all of the examples you added to the documentation and make snapshot tests out of them) and then I'll review again.

(By the way, when you add the tests, make sure they cover as much as possible, e.g., widget in the collapsed and expanded state; no custom title or a custom title set; default expand/collapse symbols vs custom ones, etc!)

Good work!

[YooSunYoung]

@rodrigogiraoserrao I'm sorry, I couldn't find enough time to work on it so far...!
But I'll work on it during the weekend at the latest unless you want to finish this already..... 🥲

[rodrigogiraoserrao]

You're getting really close.

The way I see it, this is what's left:

• make the two tiny changes I just spotted;
• I'll go over the collapsible.md file with the documentation to rephrase some sentences; and
• I'll ask someone else on the team to go over the PR just to make sure you and I are not missing anything.

Sound good?

[YooSunYoung]

You're getting really close.

The way I see it, this is what's left:

make the two tiny changes I just spotted;
I'll go over the collapsible.md file with the documentation to rephrase some sentences; and
I'll ask someone else on the team to go over the PR just to make sure you and I are not missing anything.
Sound good?

Hi, @rodrigogiraoserrao, Yes...! That sounds great. I pushed some fixes again...! Sorry for the clumsy work 🥲

[rodrigogiraoserrao]

Sorry for the clumsy work 🥲

It's not clumsy work! It's a big Textual PR.

[YooSunYoung]

Hi @rodrigogiraoserrao ...! I'm sorry I forgot to follow this up...!

And I just realized that the snapshot test failed in the CI : D....
I will try to fix that. Is there anything else to be done...?

[rodrigogiraoserrao]

And I just realized that the snapshot test failed in the CI : D.... I will try to fix that. Is there anything else to be done...?

That was just a flaky test. I reran GH actions and everything is fine. We just need to go over your PR and we need a bit more time, please.
Thanks for your patience!

[willmcgugan]

LGTM!