Solid: 3.0
cschroeter opened this issue · comments
Christian Schröter commented
Progress
Add Context
parts and short TypeDefinitions
:
- Accordion
- Avatar
- Carousel
- Checkbox
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Date Picker
- Dialog
- Editable
- File Upload
- Format
- Hover Card
- Menu
- Number Input
- Pagination
- Pin Input
- Popover
- Progress
- Radio Group
- Rating Group
- Segment Group
- Select
- Slider
- Splitter
- Switch
- Tabs
- Tags Input
- Toast
- Toggle Group
- Tooltip
- Tree View
Changelog
Added
- Exposed component-related types to keep imports clean and orderly.
import { Avatar } from '@ark-ui/solid';
export const Example = () => {
// New: Use `Avatar` import to declare types.
const handleLoadingStatusChange = (details: Avatar.StatusChangeDetails) => {
console.log(details.status);
};
return (
<Avatar.Root onLoadingStatusChange={handleLoadingStatusChange}>
<Avatar.Fallback>PA</Avatar.Fallback>
<Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
</Avatar.Root>
);
};
- Added
Context
components to allow access to the internal machine API. Previously, it was only possible to access the internal API at the root level, which is manageable for small components but could lead to cumbersome composition in larger components. Additionally, this pattern clashed with theasChild
(as
) composition pattern we use.
export const Basic = () => (
<Popover.Root>
<Popover.Trigger>Open</Popover.Trigger>
<Popover.Positioner>
<Popover.Context>
{(api) => (
<Popover.Content>
<Popover.Title onClick={() => api().close()}>Title</Popover.Title>
<Popover.Description>Description</Popover.Description>
</Popover.Content>
)}
</Popover.Context>
</Popover.Positioner>
</Popover.Root>
);
Changed
- Refined the current
as
prop implementation. The previous approach had several issues, mostly related to the merging of multiple types (e.g., ButtonProps + DialogTriggerProps + HTMLButtonElement), which resulted in a sluggish and, in some cases, malfunctioning implementation.
// before
<Button as={Dialog.Trigger} variant="solid" size="sm">
Open Dialog
</Button>
// after
<Dialog.Trigger asChild>
{(props) => (
<Button
{...props({ onClick: () => console.log('merge events') })}
variant="solid"
size="md"
>
Open Dialog
</Button>
)}
</Dialog.Trigger>
Removed
- BREAKING: Removed the option to access the internal API from various Root components. Use the new
Context
component instead. This change will help in streamlining theasChild
composition pattern.
Markus Gritsch commented
Same as here #2330 (comment)