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 nowh2.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>
<Menu.SubMenu>
Changed to <Menu.Section>
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.Heading>
sub-menu
Slot Removed
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>
<Menu.Divider>
Merged into <Menu.Header>
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>