0.5

[adoyle0]

Singlestage 0.5

This PR thread shall serve as a migration guide

Incomplete 0.5 docs are live at https://beta.singlestage.doordesk.net

• Adds align and side props to DropdownMenuContent and PopoverContent for anchor positioning. The anchor is the trigger Button.
  Accepted values for align are "start" | "center" | "end", with "start" being the default.
  Accepted values for side are "top" | "right" | "bottom" | "left", with "bottom" being the default.

• Adds open and modal props to DropdownMenu, ContextMenu, and Popover components.
  open is a reactive signal that controls open/close state of popovers, but is not coupled to the actual open state of the popover.
  modal controls whether a popover can be light dismissed (clicking off the popover/trigger, pressing esc, etc.) and can be used in conjunction with open to create a manually controlled popover. This effectively couples the open signal to the open state of the popover but this is not enforced so there may be edge cases where sync is lost.

• dropdown-menu CSS class changed to dropdown-menu-content

• Basic popover styling and positioning related CSS is now separate from menu styling CSS to better support custom popover/dropdown/context menu implementation

• DropdownMenuItem now has a dismiss prop that toggles whether or not clicking the item closes the popover

• dismiss and modal are Reactive and can take signals

• Added animations for popovers for users who don't prefer reduced motion

• Updated styling to mimic shadcn

• Added submenus for dropdown and context menus

• Added CheckboxItem and RadioItem components for use within popover menus

• Added PopoverHeader, PopoverTitle, and PopoverDescription to Popover

• Change all invalid and disabled props to Reactive to allow signals

Closes #44
Mitigates #48

• Theme::Default is renamed to Theme::Neutral and the default theme is now Theme::Neutral
• Alert now grows to the full width of its parent container
• Added AlertAction component
• as_button Link prop renamed to render_as and now takes a String. as_button=true is now render_as="button"
• Links can now render as Badges with render_as="badge"
• Added size prop to Avatar
• Added AvatarBadge and AvatarGroupCount
• Added "none" variant to Button
• Added BreadcrumbEllipsis, BreadcrumbList, BreadcrumbPage
• Breadcrumb changed name to BreadcrumbList and was replaced with a nav container component
• Breadcrumb component is a bit more accessible with some aria roles and tags for screen readers
• SelectItem renamed to SelectOption
• SelectContent renamed to SelectOptGroup
• Added CardAction
• DialogTrigger is no longer a slot
• <Dialog alert=true> is now <AlertDialog>
• Added DialogCancel and DialogAction
• Added AlertDialogCancel and AlertDialogAction
• Added AlertDialogMedia
• Added DialogContent, and AlertDialogContent which are now required, and dialog headers and footers go inside them now
• AspectRatio ratio now takes a String
• Progress max and value props now take f64
• A bunch of components that share duplicate code are now built from component primitives for better DX
• Added lighter weight testing/dev site for DX, later this can be used for playwright or something
• Added orientation prop to Slider
• Added size prop to Switch
• Added orientation prop to Tabs
• Added variant prop to TabsList
• Tooltip has changed quite a bit to match shadcn:

<Tooltip side="top" align="center" value="Some text">
    <Button>"Submit"</Button>
</Tooltip>

would now be

<Tooltip>
    <TooltipTrigger>
        <Button>"Submit"</Button>
    </TooltipTrigger>
    <TooltipContent side="top" align="center">
        <p>"Some text"</p>
    </TooltipContent>
</Tooltip>

• ThemeProvider should now come before user styles to ensure proper cascading:

...
<Stylesheet id="leptos" href="/pkg/my_app.css" />
<ThemeProvider>

    <Router>
        ...
    </Router>
</ThemeProvider>
...

to:

...
<ThemeProvider>
    <Stylesheet id="leptos" href="/pkg/my_app.css" />
    <Router>
        ...
    </Router>
</ThemeProvider>
...

• Fields and various inputs now inherit signals for things like disabled and invalid from their parents. So an Input within a Field inherits from the Field, and in the case of a Checkbox within a Field within a CheckboxGroup, both the Field and Checkbox inherit from the CheckboxGroup
• Field variant="button" was removed. Now any Field inside of a FieldLabel containing a checkbox, switch, or radio button renders as a choice card. Here is an example:

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn FieldChoiceCardExample() -> impl IntoView {
    view! {
        <FieldSet class="w-full max-w-xs">
            <FieldLegend variant="label">"Compute Environment"</FieldLegend>
            <FieldDescription>"Select the compute environment for your cluster."</FieldDescription>
            <RadioGroup value="kubernetes">
                <FieldLabel label_for="kubernetes-r2h">
                    <Field orientation="horizontal">
                        <FieldContent>
                            <FieldTitle>"Kubernetes"</FieldTitle>
                            <FieldDescription>
                                "Run GPU workloads on a K8s cluster."
                            </FieldDescription>
                        </FieldContent>
                        <Radio value="kubernetes" id="kubernetes-r2h" />
                    </Field>
                </FieldLabel>
                <FieldLabel label_for="vm-z4k">
                    <Field orientation="horizontal">
                        <FieldContent>
                            <FieldTitle>"Virtual Machine"</FieldTitle>
                            <FieldDescription>
                                "Access a cluster to run GPU workloads."
                            </FieldDescription>
                        </FieldContent>
                        <Radio value="vm" id="vm-z4k" />
                    </Field>
                </FieldLabel>
            </RadioGroup>
        </FieldSet>
    }
}

• Add size and variant options for Links and Buttons used within SidebarMenuButtons
• Link now uses leptos_router::components::A internally, which means it can now only be used within a Router context, which is probably fine more often than it's not
• Link and Button now have aria_current, on Buttons it doesn't do anything outside of SidebarMenuButton currently
• Links using render_as="button" while inside SidebarMenuButton override the sidebar styling with button styling. They stretch to the same width as other sidebar buttons. Button content is centered by default since it is the default style for Buttons, but it can be justified to the start or end with class="justify-start" class="justify-end" depending on which side the sidebar is on to make it more sidebar-like
• Add as_child to Link and Button
• vertical is removed from Separator, ButtonGroupSeparator, and ButtonGroup, and was replaced with orientation to match shadcn. so <Separator vertical=true /> is now <Separator orientation="vertical" />, etc.
• Separators now auto center within their parent if a width is set, like class="w-48", etc.

[blset]

Thanks a lot for the update !

[adoyle0]

FYI: dismissable is now modal and the logic is reversed to match radix/shadcn and general web terminology. In other words dismissable=false is now modal=true.

Sorry for any inconvenience but I got it wrong and now it's right