0.5.x to 0.6.x

View Source

Introduced in v0.6.0

Main changes introduced were consolidation of various properies and overhaul of how the stylesheet distributables were built for themeing.

Framework Distributable Split

Themeing variables are now built to a separate CSS distributable that should be imported after the main Framework import.

BEFORE

import "@kahi-ui/framework/dist/kahi-ui.framework.css";

AFTER

import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";

Component Selectors Updated to use Class Names

IMPORTANT: You should never use built-in class names or target elements semantically yourself when targeting Kahi UI Components, it is considered unstable internal API! Always use custom class names! e.g. <Card.Footer class="my-card-footer">

Previously Components would use context-aware selectors or target their elements semantically. e.g.

  • <Card.Footer>.card > footer is now .card--footer.
  • <Heading is="h2">h2 is now h2.heading.

This makes Kahi UI opt-in regarding Components and reduces conflict.

htmlpalette Changed to htmlmode

Since <html data-palette> is now <html data-mode>, the htmlpalette Svelte Store has been renamed to htmlmode.

BEFORE

import {htmlpalette} from "@kahi-ui/framework";

AFTER

import {htmlmode} from "@kahi-ui/framework";

<html data-palette> Changed to <html data-mode>

To clarify intent "dark" and "light" of theme modes from Component palettes (dark, alert, negative, etc...), <html data-palette> is now <html data-mode>.

BEFORE

<html data-palette="dark">
    ...
</html>

AFTER

<html data-mode="dark">
    ...
</html>

<* align> Property Consolidated into alignment_x Property

Originally align / alignment_x properties had incompatible implementations, since they both now work via CSS Variables, they're being consolidated into a single alignment_x property.

AFFECTED COMPONENTS:

  • <Heading>
  • <NumberInput>
  • <Text>
  • <TextInput>

BEFORE

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

<Text align="right">I'm aligned to the right!</Text>

AFTER

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

<Text alignment_x="right">
    I'm aligned to the right!
</Text>

<* animation> Property Consolidated into Animation Component

Much like the Transition Component, all repeating attention grabbing animations have been consolidated into a general purpose Animation Component.

AFFECTED COMPONENTS:

  • <Badge>
  • <Dot>

BEFORE

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

<Dot animation="pulse" />

AFTER

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

<Animation animation="pulse">
    <Dot />
</Animation>

<* calendar> Property Removed / <* highlight timestamp value>

Due to a bug introduced in Chrome 96+ / Firefox 96+ regarding I18n APIs with the older release of the Temporal API, and bug in Firefox regarding non-ISO 8601 calendars (e.g. Gregorian), cross-calendar datetime manipulation has been removed. And going forward, only ISO 8601 Calendar timestamps will be accepted into property values.

If non-ISO 8601 Calendar timestamps are used, e.g. 2021-11-10[u-ca=gregory]. During any interaction by the user with the Component, it will be converted into a ISO 8601 Calendar timestamp.

AFFECTED COMPONENTS:

  • <DayPicker>
  • <DayStepper>
  • <MonthPicker>
  • <MonthStepper>
  • <YearPicker>
  • <YearStepper>

<* size> Property Consolidated into sizing Property

Originally size / sizing properties had incompatible implementations, since they both now work via CSS Variables, they're being consolidated into a single sizing property.

AFFECTED COMPONENTS:

  • <Button>
  • <Check>
  • <NumberInput>
  • <Overlay.Button>
  • <Popover.Button>
  • <Progress>
  • <Radio>
  • <Switch>
  • <Text>
  • <TextInput>

BEFORE

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

<Button size="tiny">Click me!</Button>

AFTER

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

<Button sizing="tiny">Click me!</Button>

<Button href for value> Implicit Elements Changed to Require Explicit is Property

To make Button's API consistent with the rest of the Framework's multi-element Components, is is now required to render the other elements besides <button>.

BEFORE

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

<Button
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    This is an ANCHOR Button!
</Button>

<Button for="button-type-check">
    This is a LABEL Button!
</Button>

<Button value="This is an INPUT Button!" />
<Button
    type="submit"
    value="This is a SUBMIT Button!"
/>
<Button type="reset" value="This is a RESET Button!" />

AFTER

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

<Button
    is="a"
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    This is an ANCHOR Button!
</Button>

<Button is="label" for="button-type-check">
    This is a LABEL Button!
</Button>

<Button is="input" value="This is an INPUT Button!" />
<Button
    is="input"
    type="submit"
    value="This is a SUBMIT Button!"
/>
<Button
    is="input"
    type="reset"
    value="This is a RESET Button!"
/>

<Container viewport> Removed in Favor of Viewport Width Properties

v0.6.0 introduces Viewport breakpoints to the global size property values. Which you can use to replicate previous behavior via width / max_width properties.

BEFORE

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

<Container viewport="mobile">hello world!</Container>

AFTER

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

<Container width="viewport-mobile" max_width="100">
    hello world!
</Container>

<DayStepper step> / <MonthStepper step> / <YearStepper step> Properties Consolidated into <* steps> Property

To be consistent with later additions to the Component APIs, the step property was renamed to the steps property. With otherwise no additional changes.

BEFORE

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

<DayStepper step={5} />

AFTER

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

<DayStepper steps={5} />

<Figure size> Removed in Favor of width / height / size Global Properties

v0.6.0 introduced new block sizing values to the global sizing properties. Previously <Figure size> would only apply to the width dimension, so if that affects you, you will need to migrate. Otherwise no other changes needed.

BEFORE

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

<Figure size="medium">
    <img src="..." />
</Figure>

AFTER

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

<Figure width="medium">
    <img src="..." />
</Figure>

<Figure variation="icon" size> Removed in Favor of width / height / size Prefixed Global Properties

v0.6.0 introduced new icon sizing values to the global sizing properties via icon- prefixes.

BEFORE

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

<Figure variation="icon" size="small">
    <img src="..." />
</Figure>

AFTER

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

<Figure width="icon-small">
    <img src="..." />
</Figure>

To remain consistent in naming with the rest of the Component API, <Menu.SubMenu> was renamed to <Menu.Section>.

BEFORE

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

<Menu.SubMenu>...</Menu.SubMenu>

AFTER

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

<Menu.Section>...</Menu.Section>

Menu Component's DOM structure is now updated to use flat structure of <div> elements, instead of <ul> / <li> elements. So slots are no longer needed, as <Menu.Section> can be a sibling in DOM structure.

BEFORE

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

<Menu.Container>
    <Menu.Heading>
        COMPONENTS
        <svelte:fragment slot="sub-menu">
            <Menu.SubMenu>
                <Menu.Button active>
                    Dot
                    <Spacer />
                    <Text is="span">ICON</Text>
                </Menu.Button>

                <Menu.Button>
                    Ellipsis
                    <Spacer />
                    <Text is="span">ICON</Text>
                </Menu.Button>
            </Menu.SubMenu>
        </svelte:fragment>
    </Menu.Heading>
</Menu.Container>

AFTER

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

<Menu.Container>
    <Menu.Heading>COMPONENTS</Menu.Heading>

    <Menu.Section>
        <Menu.Button active>
            Dot
            <Spacer />
            <Text is="span">ICON</Text>
        </Menu.Button>

        <Menu.Button>
            Ellipsis
            <Spacer />
            <Text is="span">ICON</Text>
        </Menu.Button>
    </Menu.Section>
</Menu.Container>

Due to duplicate styling, <Menu.Divider> was merged into <Menu.Header>. With <Menu.Divider /> becoming <Menu.Heading />, and <Menu.Divider>Text Divider</Menu.Divider> becoming <Menu.Heading variation="divider">Text Divider</Menu.Heading>.

BEFORE

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

<Menu.Container>
    <Menu.Divider>
        COMPONENTS
        <svelte:fragment slot="sub-menu">
            <Menu.SubMenu>
                <Menu.Button active>
                    Dot
                    <Spacer />
                    <Text is="span">ICON</Text>
                </Menu.Button>

                <Menu.Button>
                    Ellipsis
                    <Spacer />
                    <Text is="span">ICON</Text>
                </Menu.Button>
            </Menu.SubMenu>
        </svelte:fragment>
    </Menu.Divider>

    <Menu.Divider />

    <Menu.Heading>
        <svelte:fragment slot="sub-menu">
            <Menu.SubMenu>
                <Menu.Button>
                    Overlay
                    <Spacer />
                    <Text is="span">ICON</Text>
                </Menu.Button>
            </Menu.SubMenu>
        </svelte:fragment>
    </Menu.Heading>
</Menu.Container>

AFTER

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

<Menu.Container>
    <Menu.Heading variation="divider">
        COMPONENTS
    </Menu.Heading>

    <Menu.Section>
        <Menu.Button active>
            Dot
            <Spacer />
            <Text is="span">ICON</Text>
        </Menu.Button>

        <Menu.Button>
            Ellipsis
            <Spacer />
            <Text is="span">ICON</Text>
        </Menu.Button>
    </Menu.Section>

    <Menu.Heading />

    <Menu.Section>
        <Menu.Button>
            Overlay
            <Spacer />
            <Text is="span">ICON</Text>
        </Menu.Button>
    </Menu.Section>
</Menu.Container>

<Mosaic> Changed to <Mosaic.Container>

To facilitate the new <Mosaic.Item> Component, the Mosaic Component API was turned into a multi-pattern namespace. With the original Component being changed from <Mosaic> to <Mosaic.Container>.

BEFORE

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

<Mosaic sizing="tiny" spacing="medium">
    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />

    <Box palette="affirmative" />
    <Box palette="negative" />
    <Box palette="alert" />
</Mosaic>

AFTER

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

<Mosaic.Container sizing="tiny" spacing="medium">
    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />

    <Box palette="affirmative" />
    <Box palette="negative" />
    <Box palette="alert" />
</Mosaic.Container>

<Pagination href> Implicit Elements Changed to Require Explicit is Property

To make Pagination's API consistent with the rest of the Framework's multi-element Components, is is now required to render the other elements besides <button>.

BEFORE

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

<Pagination
    href={"/path/to/list?page=${page}"}
    pages={10}
    value={5}
>
    This is an ANCHOR Button!
</Pagination>

AFTER

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

<Pagination
    is="a"
    href={"/path/to/list?page=${page}"}
    pages={10}
    value={5}
>
    This is an ANCHOR Button!
</Pagination>

<Spinner> Removed in Favor of <Progress shape="circle">

Due to <Progress shape="circle"> new indeterminate appearance, and because Progress didn't exist when Spinner was originally added. It is now being removed due to duplicate functionality.

BEFORE

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

<Spinner palette="accent" />

AFTER

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

<Progress shape="circle" palette="accent" />

<Stack> Changed to <Stack.Container>

To facilitate the new <Stack.Item> Component, the Stack Component API was turned into a multi-pattern namespace. With the original Component being changed from <Stack> to <Stack.Container>.

BEFORE

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

<Stack sizing="tiny" spacing="medium">
    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />
</Stack>

AFTER

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

<Stack.Container sizing="tiny" spacing="medium">
    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />
</Stack.Container>

<Text is="kbd"> Removed in Favor of <Kbd>

Since the <kbd> element renders as its own view, rather than strictly acting like a text modifier. It migrated to being its own <Kbd> Component.

BEFORE

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

<Text is="kbd">CTRL+C</Text>

AFTER

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

<Kbd>CTRL+C</Kbd>

<TextInput characters lines> Properties Consolidated into <TextInput span_x span_y> Properties

To be consistent with later additions to the Component APIs, both the characters and lines properties were renamed to the span_x and span_y properties respectively. With otherwise no additional changes.

BEFORE

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

<TextInput is="textarea" characters={5} lines={3} />

AFTER

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

<TextInput is="textarea" span_x={5} span_y={3} />

<TextInput max_length min_length> Properties Consolidated into <TextInput max min> Properties

To be consistent with later additions to the Component APIs, both the max_length and min_length properties were renamed to the max and min properties respectively. With otherwise no additional changes.

BEFORE

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

<TextInput max_length={10} min_length={3} />

AFTER

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

<TextInput max={10} min={3} />

<TimePicker highlight> Property Now Accepts string[] Instead of string

Both highlight property was updated to accept string arrays instead of singular strings. Allowing for multiple timestamps to be used.

BEFORE

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

<TimePicker highlight="15:00:00" />

AFTER

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

<TimePicker highlight={["15:00:00"]} />

<Wave> Removed in Favor of <Ellipsis>

v0.6.0 introduces new customizable functionality to the Ellipsis Component for rendering synchronized animated content. Which can duplicate the previously what Wave accomplished.

BEFORE

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

<Wave />

AFTER

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

<Ellipsis animation="bounce" iterations={5}>
    <Dot />
</Ellipsis>