[docs] Native details-summary props table

[mj12albert]

Preview: https://deploy-preview-2135--base-ui.netlify.app/react/components/toggle

Testing a native <details>+<summary> implementation for https://github.com/mui/base-ui/issues/1752

Notable differences from Accordion:

• VO reads the trigger as "disclosure triangle, group" in Chrome, "summary, group" in Firefox and Safari; overall it's a bit shorter because it doesn't have a heading element adding to the announcement

• Can't arrow between triggers like Accordion but is lightly reimplemented here

• It's hidden="until-found" by default when supported, no need to fight React 👍

• [x] I have followed (at least) the PR section of the contributing guide.

[pkg-pr-new[bot]]

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@2135

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@2135

commit: 5457b8c

[mui-bot]

Bundle size report

Bundle	Parsed Size	Gzip Size
@base-ui-components/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 5457b8c04977e53272f55e769e271c544d11f1dc

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	5457b8c04977e53272f55e769e271c544d11f1dc
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6886cdb8da51550008644f3d
😎 Deploy Preview	https://deploy-preview-2135--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mj12albert]

Needs https://github.com/mui/base-ui/pull/2104 to generate the json in the new format

[atomiks]

Seems like it shouldn't open while trying to select text. (The Accordion example made this impossible, but that's not accessible)

https://github.com/user-attachments/assets/a4660d49-d49f-45ad-a06f-79231a4bf907

[mj12albert]

Seems like it shouldn't open while trying to select text

When clicking the text selection, should it cancel the text selection only or toggle the element as well?

https://github.com/user-attachments/assets/b0f5dadc-c22a-49eb-9206-6fbaa538b40c

Or should we use user-select:none for consistency, in the docs we seem to do this for all interactive elements

[atomiks]

The main issue with disabling text selection is that you can't copy the name of the prop when trying to select it. Double clicking also allows the entire text to be selected. Maybe trying to click on text shouldn't open it, but everywhere else is fine

[romgrk]

Maybe trying to click on text shouldn't open it, but everywhere else is fine

That doesn't sound like a good UX. The text is right in the middle of the element, it makes for a weird click target if the text doesn't also open the element.

[colmtuite]

@mj12albert Some suggestions:

1. Remove the gray box styling from the prop name <code>, and don't prevent the click. Revert it to how it was before.
2. Add a "Name" dt to the panel.
3. Remove the :active style from the <summary>.
4. Make the <dt> 400 weight.
5. Bump up the lightness of the <summary> :hover in dark mode. Light mode is good.
6. <ul> inside the panel should not have bottom margin.
7. Reduce the gap on the (default) thing to gap-2.
8. Rows are much larger now than on prod. We need to get them back to 37.5px tall (I assume this is the new <code> styling causing this)
9. Afaik, we have no control over the obnoxious orange highlight when using hidden until found?

[michaldudak]

Needs https://github.com/mui/base-ui/pull/2104 to generate the json in the new format

@mj12albert FYI, this is now merged.

[mj12albert]

6. <ul> inside the panel should not have bottom margin.

There's no margins on the list element, did you mean this padding?

Afaik, we have no control over the obnoxious orange highlight when using hidden until found?

Not at the moment, the closest is a ::search-text pseudo-element that's experimental in Chrome: https://github.com/Igalia/explainers/blob/main/css/find-in-page/README.md

Fixed your other comments as well @colmtuite

[mj12albert]

Needs #2104 to generate the json in the new format

@mj12albert FYI, this is now merged.

Thanks I think we should do the new format and changes to the formatter in a separate PR actually ~

[colmtuite]

@mj12albert the padding yes

[michaldudak]

WDYT about displaying expanded type information in a tooltip on hover (so when I hover over function I get the full signature in a tooltip)? This would be an additional improvement for mouse users and other will still be able to expand the details.

[michaldudak]

It seems the opening and closing parentheses are displayed in a different font and color

[colmtuite]

WDYT about displaying expanded type information in a tooltip

Could work yep. Set hoverable to false, so it doesn't block clicks on triggers above.

Do you think there's value in adding a "Copy" icon button beside some of the info inside the expanded panel?

@michaldudak @mj12albert

[mj12albert]

Do you think there's value in adding a "Copy" icon button beside some of the info inside the expanded panel?

I think if the panel can accommodate one more clickable/interactive thing, the most useful thing could be a link to the individual prop, like the Material UI docs have: https://mui.com/material-ui/api/checkbox/#checkbox-prop-defaultChecked

For users, I don't think it's that useful to be able to copy entire blocks of docs content (like description) that isn't code

[colmtuite]

@mj12albert not the description no, but the prop name and type definition? Would it be useful to be able to copy those? Linking to the prop name could be useful yep. But ok let's ignore these ideas for now until we fix up the other parts.

Additional feedback:

• The dt and dd have different top padding; 6px and 8px respectively. Currently, their contents are misaligned.
• The tooltip arrow appears later than the tooltip popup.
• The tooltip needs hoverable set to false, so it doesn't block clicks on triggers above.
• We need consistent spacing between text in the triggers and in the panel (as discussed elsewhere)

[atomiks]

The tooltip arrow appears later than the tooltip popup.

This is due to overflow: auto on the Popup, and the transform style temporarily creates a containing block, which causes it to be clipped off. The infotips had this style but the tooltip shouldn't need it. I also think the delay should be more than 100ms (maybe 300) as it seems to pop up a bit too easily.

[colmtuite]

@mj12albert Much better, thanks. A couple things left in this round:

1. The props still jump a tiny bit when the panel expands. .AccordionContent needs 1px padding on both top and bottom.
2. Code blocks inside panels are misaligned. Those margin props need to be changed to mt-1 and mb-1.
3. If it's easy to tweak the tooltip without affecting other tooltips/infotips on the docs, it would be nice to reduce the padding inside the tooltip popup a tiny amount, just down to the next step in the scale.

I'll send more feedback soon on visual styling (shadows etc.) and also the mobile styles, they need some tweaking.

[michaldudak]

Literal unions such as AccordionRoot's orientation should be expandable like function definitions

[atomiks]

It's probably a good idea to make the tooltip have a wider max-width to accomodate most function definition lengths (without them spilling onto a new line and becoming less readable)

[colmtuite]

@mj12albert I mentioned setting scroll-margin-top to 0 on the meeting, but didn't understand the reasoning or outcome. Isn't this better?

https://github.com/user-attachments/assets/edc8cc8b-e48b-453f-b394-edaee54ce21e

[mj12albert]

@mj12albert I mentioned setting scroll-margin-top to 0 on the meeting, but didn't understand the reasoning or outcome. Isn't this better?

I updated it to 0, what about in the mobile layout do you want the scroll margin to make the trigger flush against the header? @colmtuite

[colmtuite]

@mj12albert yea, looks nice 👌

[mj12albert]

For aligning the mobile layout of the various tables, the triggers all use display: flex by default (the base Accordion styles) unless there's 3 or more "cells" then it'll change to grid

Also added the overscroll graphic to the trigger as it could overflow in some cases:

https://github.com/user-attachments/assets/0870dd99-f812-4807-b9f9-ef4b40bdc77c

Any further feedback or is it good to go? @colmtuite