feat(components): Disclosure (fka Accordion) #5873
Conversation
Port from Accordion to React Aria Disclosure and DisclosureGroup
| export const disclosureGroupCss = css` | ||
| & > * { | ||
| width: 100%; | ||
| .react-aria-Heading { | ||
| width: 100%; | ||
| .react-aria-Button[slot="trigger"] { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
| `; |
There was a problem hiding this comment.
I'm thinking of just putting this on the disclosure itself and not having any styles for the group.
Right now you have to wrap a single Disclosure in a group if you want it to fill its container, otherwise its only as long as its title.
Either that, or I add a width prop to Disclosure
| > | ||
| <PlaygroundTemplate | ||
| <DisclosureGroup defaultExpandedKeys={["prompts"]}> | ||
| <Disclosure id="prompts"> |
There was a problem hiding this comment.
This originally had a size of "L". Stashing and unstashing this, I can't really tell a difference in size
There was a problem hiding this comment.
I think you may be right that there's only one size
There was a problem hiding this comment.
Turns out L was valuable. It made the accordions on this page all the same height, which matters when one accordion has nested controls
dosubot
bot
added
the
size:XXL
| <ModelEmbeddingsTable model={data} /> | ||
| </DisclosurePanel> | ||
| </Disclosure> | ||
| <Disclosure id="dimensions"> |
There was a problem hiding this comment.
There's a missing border here at the bottom of the table.
You can run this via pnpm run dev:embeddings
There was a problem hiding this comment.
I ran through all of the embedding usages before pushing. I honestly can't tell which border is missing from this screenshot 😅
There was a problem hiding this comment.
I'd expect there to be a visual separation between the table pagination and the row that says "Dimensions"
There was a problem hiding this comment.
Disclosure group will now add a border between disclosures, as long as it is expanded and not the last item
| <StopPropagation> | ||
| <Flex direction="row" gap="size-100" alignItems="center"> | ||
| <TemplateLanguageRadioGroup /> | ||
| <AddPromptButton /> | ||
| </Flex> | ||
| </StopPropagation> |
There was a problem hiding this comment.
There's a bit of visual regression here where I think the "actions" should still be right aligned
Also the addition of the nested values causes the trigger hight to grow. Can we use a different sizing strategy so that these triggers stay the same height? I know it looks odd padding wise but it might be the lesser of two evils right now?
There was a problem hiding this comment.
I added a "L" variant that makes all of these disclosures the same height now
| <ModelEmbeddingsTable model={data} /> | ||
| </DisclosurePanel> | ||
| </Disclosure> | ||
| <Disclosure id="dimensions"> |
There was a problem hiding this comment.
I'd expect there to be a visual separation between the table pagination and the row that says "Dimensions"
|
I think the padding on the text used to match the tab indentation. |
cephalization
changed the title
cephalization
deleted the
cephalization/5855-phoenix-components-accordion
branch
Port from Accordion to React Aria Disclosure and DisclosureGroup
New.Accordion.mov
Resolves #5855