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.