0.4.x to 0.5.x

View Source

Introduced in v0.5.0

Main changes introduced were previously deprecated functionality, obsoleted functionality, and refactoring to promote better composability / reuse between Components.

Aside Built-in Collapse Removal

Due to the multitude of ways you can design an top navigation collapse feature, the built-in collapsing was removed from Aside. Instead the Framework provides an unopinionated baseline that you can use augment with Components to build viewport-aware collapsing.

BEFORE

<script>
    import {
        Anchor,
        Aside,
        ContextButton,
        Divider,
        Menu,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Aside.Container
    logic_id="aside-collapsing-old"
    palette="inverse"
    max_width="content-max"
    height="100"
    captive
    dismissible
>
    <Aside.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider />
    </Aside.Header>

    <Aside.Section>
        <Menu.Container>
            <Menu.Heading>DISPLAY</Menu.Heading>

            <Menu.Button>
                Badge
                <Spacer />
                <span>ICON</span>
            </Menu.Button>

            <Menu.Heading>FEEDBACK</Menu.Heading>

            <Menu.Button>
                Dot
                <Spacer />
                <span>ICON</span>
            </Menu.Button>

            <Menu.Button active>
                Spinner
                <Spacer />
                <span>ICON</span>
            </Menu.Button>
        </Menu.Container>
    </Aside.Section>

    <Aside.Footer>
        <Anchor href="#">
            <Text is="small">v0.5.0</Text>
        </Anchor>
    </Aside.Footer>

    <svelte:fragment slot="close">
        <ContextButton
            size="huge"
            palette="dark"
            variation="clear"
        >
            -
        </ContextButton>
    </svelte:fragment>

    <svelte:fragment slot="open">
        <ContextButton size="huge">+</ContextButton>
    </svelte:fragment>
</Aside.Container>

AFTER

<script>
    import {
        Anchor,
        Aside,
        Button,
        Divider,
        Menu,
        Position,
        Overlay,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Position
    variation="action"
    alignment_x="left"
    hidden={["desktop", "widescreen"]}
>
    <Button for="aside-collapsing-new">+</Button>
</Position>

<Overlay.Container
    logic_id="aside-collapsing-new"
    dismissible
>
    <Overlay.Backdrop
        hidden={["desktop", "widescreen"]}
    />

    <Overlay.Section
        contents={["desktop", "widescreen"]}
        animation="slide"
        direction="left"
        alignment_x="left"
    >
        <Aside.Container
            palette="inverse"
            max_width="content-max"
            height="100"
        >
            <Aside.Header>
                <Anchor href="#">Kahi UI</Anchor>
                <Divider />
            </Aside.Header>

            <Aside.Section>
                <Menu.Container>
                    <Menu.Heading>
                        DISPLAY
                    </Menu.Heading>

                    <Menu.Button>
                        Badge
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>

                    <Menu.Heading>
                        FEEDBACK
                    </Menu.Heading>

                    <Menu.Button>
                        Dot
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>

                    <Menu.Button active>
                        Spinner
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>
                </Menu.Container>
            </Aside.Section>

            <Aside.Footer>
                <Anchor href="#">
                    <Text is="small">v0.5.0</Text>
                </Anchor>
            </Aside.Footer>

            <Position
                variation={["container", "action"]}
                hidden={["desktop", "widescreen"]}
            >
                <Overlay.Button variation="clear">
                    -
                </Overlay.Button>
            </Position>
        </Aside.Container>
    </Overlay.Section>
</Overlay.Container>

Badge position Property Removal

Due to the introduction of the Position Component, the position property was obsoleted.

BEFORE

<script>
    import {Badge, Button} from "@kahi-ui/framework";
</script>

<Button palette="accent">
    Open Inbox
    <Badge palette="negative" position="floated">
        +99
    </Badge>
</Button>

AFTER

<script>
    import {
        Badge,
        Button,
        Position,
    } from "@kahi-ui/framework";
</script>

<Button palette="accent">
    Open Inbox
    <Position
        variation="floated"
        placement="top"
        alignment_x="right"
    >
        <Badge palette="negative" shape="pill">
            +99
        </Badge>
    </Position>
</Button>

Check Focus Events Removal

Due to the introduction of the focusin / focusout global HTML5 events, the blur / focus events were removed. The new events should work functionally the same as a drop-in replacement.

BEFORE

<script>
    import {Check} from "@kahi-ui/framework";

    function on_blur(event) {
        // ...
    }

    function on_focus(event) {
        // ...
    }
</script>

<Check on:blur={on_blur} on:focus={on_focus} />

AFTER

<script>
    import {Check} from "@kahi-ui/framework";

    function on_focus_in(event) {
        // ...
    }

    function on_focus_out(event) {
        // ...
    }
</script>

<Check
    on:focusin={on_focus_in}
    on:focusout={on_focus_out}
/>

Dot position Property Removal

Due to the introduction of the Position Component, the position property was obsoleted.

BEFORE

<script>
    import {Dot, Button} from "@kahi-ui/framework";
</script>

<Button palette="accent">
    Open Inbox
    <Dot palette="negative" position="floated" />
</Button>

AFTER

<script>
    import {
        Dot,
        Button,
        Position,
    } from "@kahi-ui/framework";
</script>

<Button palette="accent">
    Open Inbox
    <Position
        variation="floated"
        placement="top"
        alignment_x="right"
    >
        <Dot palette="negative" />
    </Position>
</Button>

Ellipsis character Property Removal

To allow for embedded icons (e.g. SVGs), the character property was removed in favor of accepting the default slot as character customization.

BEFORE

<script>
    import {Ellipsis} from "@kahi-ui/framework";
</script>

<Ellipsis character="?" />

AFTER

<script>
    import {Ellipsis} from "@kahi-ui/framework";
</script>

<Ellipsis>?</Ellipsis>

Offscreen Removal in Favor of Overlay

With the new changes regarding being able to configure Overlay's animations, and Overlay already having configurable positioning, Offscreen was removed as duplicate work.

BEFORE

<script>
    import {
        Box,
        Button,
        ContextButton,
        Offscreen,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Button for="offscreen-old" palette="accent">
    Open Offscreen
</Button>

<Offscreen
    logic_id="offscreen-old"
    placement="top"
    hidden
    captive
    dismissible
>
    <Box palette="accent" padding="medium">
        <Stack
            orientation="horizontal"
            alignment_y="center"
            spacing="medium"
        >
            <ContextButton
                palette="light"
                variation="clear"
            >
                X
            </ContextButton>

            Well, hello there!
        </Stack>
    </Box>
</Offscreen>

AFTER

<script>
    import {
        Box,
        Button,
        Overlay,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Button for="offscreen-new" palette="accent">
    Open Overlay
</Button>

<Overlay.Container
    logic_id="offscreen-new"
    alignment_x="stretch"
    alignment_y="top"
    dismissible
>
    <Overlay.Backdrop />

    <Overlay.Section animation="slide" direction="top">
        <Box palette="accent" padding="medium">
            <Stack
                orientation="horizontal"
                alignment_y="center"
                spacing="medium"
            >
                <Overlay.Button
                    palette="light"
                    variation="clear"
                >
                    X
                </Overlay.Button>

                Well, hello there!
            </Stack>
        </Box>
    </Overlay.Section>
</Overlay.Container>

Offscreen hidden Override Property Removal

The Framework now provides this functionality as a global contents property.

Omni Built-in Collapse Removal

Due to the multitude of ways you can design an top navigation collapse feature, the built-in collapsing was removed from Omni. Instead the Framework provides an unopinionated baseline that you can use augment with Components to build viewport-aware overflow collapsing.

BEFORE

<Omni.Container
    logic_id="omni-collapse-old"
    palette="dark"
    width="100"
    captive
    dismissible
>
    <Omni.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider orientation="vertical" />
        <Anchor href="#">
            <Text is="small">v0.5.0</Text>
        </Anchor>

        <ContextButton variation="clear">
            +
        </ContextButton>

        <ContextButton variation="clear">
            -
        </ContextButton>
    </Omni.Header>

    <Omni.Footer>
        <Omni.Section>
            <Menu.Container orientation="horizontal">
                <Menu.Button active>Docs</Menu.Button>
                <Menu.Button>Playground</Menu.Button>
                <Menu.Button>Storybook</Menu.Button>
            </Menu.Container>
        </Omni.Section>

        <Omni.Section>
            <Menu.Container orientation="horizontal">
                <Menu.Button>GitHub</Menu.Button>
            </Menu.Container>
        </Omni.Section>
    </Omni.Footer>
</Omni.Container>

AFTER

<script>
    import {
        Anchor,
        Box,
        Divider,
        Menu,
        Omni,
        Popover,
    } from "@kahi-ui/framework";
</script>

<Omni.Container palette="dark" width="100">
    <Omni.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider orientation="vertical" />
        <Anchor href="#">
            <Text is="small">v0.5.0</Text>
        </Anchor>
    </Omni.Header>

    <Omni.Section hidden={["mobile", "tablet"]}>
        <Menu.Container orientation="horizontal">
            <Menu.Button active>Docs</Menu.Button>
            <Menu.Button>Playground</Menu.Button>
            <Menu.Button>Storybook</Menu.Button>
        </Menu.Container>
    </Omni.Section>

    <Omni.Footer>
        <Menu.Container
            hidden={["mobile", "tablet"]}
            orientation="horizontal"
        >
            <Menu.Button>GitHub</Menu.Button>
        </Menu.Container>

        <Popover.Container
            hidden={["desktop", "widescreen"]}
            logic_id="omni-collapse-new"
            dismissible
        >
            <Popover.Button variation="clear">
                +
            </Popover.Button>

            <Popover.Section
                alignment_x="left"
                spacing="small"
            >
                <Box
                    palette="auto"
                    elevation="high"
                    padding="medium"
                    shape="rounded"
                >
                    <Menu.Container>
                        <Menu.Button active>
                            Docs
                        </Menu.Button>

                        <Menu.Button>
                            Playground
                        </Menu.Button>

                        <Menu.Button>
                            Storybook
                        </Menu.Button>

                        <Menu.Button>
                            GitHub
                        </Menu.Button>
                    </Menu.Container>
                </Box>
            </Popover.Section>
        </Popover.Container>
    </Omni.Footer>
</Omni.Container>

Overlay is now a Multi-Pattern Component

In order to better facilitate future features, Overlay was changed to be a multi-pattern Component. With CSS-logic handling staying in the top-level <Overlay.Container>, and rendering related handling splitting off into <Overlay.Section>.

BEFORE

<script>
    import {Box, Overlay} from "@kahi-ui/framework";
</script>

<Overlay spacing="medium">
    <Box>I am a Box!</Box>
    <Box>And I am another Box!</Box>
</Overlay>

AFTER

<script>
    import {Box, Overlay} from "@kahi-ui/framework";
</script>

<Overlay.Container>
    <Overlay.Section spacing="medium">
        <Box>I am a Box!</Box>
        <Box>And I am another Box!</Box>
    </Overlay.Section>
</Overlay.Container>

Also note, instead of a seperate ContextButton Component, there is now an Overlay-specific <Overlay.Button> that automatically inherits logic_id.

BEFORE

<script>
    import {
        Box,
        Button,
        ContextButton,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button for="overlay-context-button">
    Open Overlay
</Button>

<Overlay logic_id="overlay-context-button">
    <Box padding="small">
        <ContextButton>Dismiss</ContextButton>
    </Box>
</Overlay>
<script>
    import {
        Box,
        Button,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button for="overlay-multi-pattern-button">
    Open Overlay
</Button>

<Overlay.Container
    logic_id="overlay-multi-pattern-button"
>
    <Overlay.Section>
        <Box padding="small">
            <Overlay.Button>Dismiss</Overlay.Button>
        </Box>
    </Overlay.Section>
</Overlay.Container>

Overlay captive Property Removal

To support customization via properties, <Overlay captive> was removed in favor of composable a <Overlay.Backdrop> Component.

BEFORE

<script>
    import {Button, Overlay} from "@kahi-ui/framework";
</script>

<Button for="overlay-captive-property">
    Open Overlay
</Button>

<Overlay
    logic_id="overlay-captive-property"
    captive
    dismissible
>
    ...
</Overlay>
<script>
    import {Button, Overlay} from "@kahi-ui/framework";
</script>

<Button for="overlay-backdrop-component">
    Open Overlay
</Button>

<Overlay.Container
    logic_id="overlay-backdrop-component"
>
    <Overlay.Backdrop />

    ...
</Overlay.Container>

Popover is now a Multi-Pattern Component

In order to better facilitate future features, Popover was changed to be a multi-pattern Component. With CSS-logic handling staying in the top-level <Popover.Container>, and rendering related handling splitting off into <Popover.Section>.

BEFORE

<script>
    import {Box, Popover} from "@kahi-ui/framework";
</script>

<Popover spacing="medium">
    <!-- ... -->

    <Box>I am a Box!</Box>
</Popover>

AFTER

<script>
    import {Box, Popover} from "@kahi-ui/framework";
</script>

<Popover.Container>
    <!-- ... -->

    <Popover.Section spacing="medium">
        <Box>I am a Box!</Box>
    </Popover.Section>
</Popover.Container>

Also note, instead of a seperate ContextButton Component, there is now an Popover-specific <Popover.Button> that automatically inherits logic_id.

BEFORE

<script>
    import {
        Box,
        ContextButton,
        Popover,
    } from "@kahi-ui/framework";
</script>

<Popover logic_id="popover-context-button">
    <ContextButton>Open Popover</ContextButton>

    <Box>I am a Box!</Box>
</Popover>

AFTER

<script>
    import {Box, Popover} from "@kahi-ui/framework";
</script>

<Popover.Container>
    <Popover.Button>Open Popover</Popover.Button>

    <Popover.Section>
        <Box>I am a Box!</Box>
    </Popover.Section>
</Popover.Container>

Popover hidden Override Property Removal

The Framework now provides this functionality as a global contents property.

Position floated placement Removal

To consistently align with Components like Overlay, <Position variation="floated" placement="top/bottom"> was renamed to <Position variation="floated" alignment_y="top/bottom">.

BEFORE

<script>
    import {Position} from "@kahi-ui/framework";
</script>

<Position variation="floated" placement="top">
    ...
</Position>

AFTER

<script>
    import {Position} from "@kahi-ui/framework";
</script>

<Position variation="floated" alignment_y="top">
    ...
</Position>

Radio Focus Events Removal

Due to the introduction of the focusin / focusout global HTML5 events, the blur / focus events were removed. The new events should work functionally the same as a drop-in replacement.

BEFORE

<script>
    import {Radio} from "@kahi-ui/framework";

    function on_blur(event) {
        // ...
    }

    function on_focus(event) {
        // ...
    }
</script>

<Radio on:blur={on_blur} on:focus={on_focus} />

AFTER

<script>
    import {Radio} from "@kahi-ui/framework";

    function on_focus_in(event) {
        // ...
    }

    function on_focus_out(event) {
        // ...
    }
</script>

<Radio
    on:focusin={on_focus_in}
    on:focusout={on_focus_out}
/>

Spacer orientation Property Removal

To simplify the backing CSS, the orientation property was removed in favor of using the existing spacing_x / spacing_y properties for axis-specific spacing.

BEFORE

<script>
    import {Spacer} from "@kahi-ui/framework";
</script>

<Spacer orientation="horizontal" spacing="huge" />

AFTER

<script>
    import {Spacer} from "@kahi-ui/framework";
</script>

<Spacer spacing_x="huge" />

Spacer variation Property Removal

To bring Spacer inline with API functionality -> naming used in other Components, variation was removed in favor of is.

BEFORE

<script>
    import {Spacer} from "@kahi-ui/framework";
</script>

<Spacer variation="inline" />

AFTER

<script>
    import {Spacer} from "@kahi-ui/framework";
</script>

<Spacer is="span" />

Switch Focus Events Removal

Due to the introduction of the focusin / focusout global HTML5 events, the blur / focus events were removed. The new events should work functionally the same as a drop-in replacement.

BEFORE

<script>
    import {Switch} from "@kahi-ui/framework";

    function on_blur(event) {
        // ...
    }

    function on_focus(event) {
        // ...
    }
</script>

<Switch on:blur={on_blur} on:focus={on_focus} />

AFTER

<script>
    import {Switch} from "@kahi-ui/framework";

    function on_focus_in(event) {
        // ...
    }

    function on_focus_out(event) {
        // ...
    }
</script>

<Switch
    on:focusin={on_focus_in}
    on:focusout={on_focus_out}
/>

TextInput Focus Events Removal

Due to the introduction of the focusin / focusout global HTML5 events, the blur / focus events were removed. The new events should work functionally the same as a drop-in replacement.

BEFORE

<script>
    import {TextInput} from "@kahi-ui/framework";

    function on_blur(event) {
        // ...
    }

    function on_focus(event) {
        // ...
    }
</script>

<TextInput on:blur={on_blur} on:focus={on_focus} />

AFTER

<script>
    import {TextInput} from "@kahi-ui/framework";

    function on_focus_in(event) {
        // ...
    }

    function on_focus_out(event) {
        // ...
    }
</script>

<TextInput
    on:focusin={on_focus_in}
    on:focusout={on_focus_out}
/>

Transition CSS Custom Properties Removal

Due to the new <Transition behavior="explicit"> implementation, the current variables would have to get extremely verbose. And ultimately seems a very limited use-case to have animations customizable on that level.