Skip to content

Kds 573 navigation #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thresharx merged 9 commits into from
Apr 20, 2026
Merged

Kds 573 navigation #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fc21708
KDS-573: add KdsNavigation
thresharx Apr 10, 2026
8e683cb
KDS-573: extract Divider from ListItemDivider
thresharx Apr 13, 2026
176ea5e
KDS-573: cleanup
thresharx Apr 13, 2026
8ea6908
KDS-573: fix test, cleanup and pr comments
thresharx Apr 14, 2026
5b50932
KDS-573: fix active state when clicking trailing button and prefix di…
thresharx Apr 14, 2026
1b8aedc
KDS-573: export divider as KdsDivider
thresharx Apr 15, 2026
81f7f23
KDS-573: adjust changeset, add ariaLabel to argTypes and rename file …
thresharx Apr 15, 2026
01270a9
KDS-573: add button click emit, add button and badge story, export na…
thresharx Apr 20, 2026
3e051f4
KDS-573: improve aria label type description, fix Navigation aria lab…
thresharx Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shaggy-kids-carry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@knime/kds-components": patch
---
Comment thread
thresharx marked this conversation as resolved.

add KdsNavigation and move ListItemDivider to accessories as KdsDivider
18 changes: 9 additions & 9 deletions ...istItemDivider/ListItemDivider.stories.ts → ...accessories/Divider/KdsDivider.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ import { expect, within } from "storybook/test";
import {
buildAllCombinationsStory,
buildDesignComparatorStory,
} from "../../../test-utils/storybook";
} from "../../test-utils/storybook";

import ListItemDivider from "./ListItemDivider.vue";
import KdsDivider from "./KdsDivider.vue";

const figmaBaseUrl =
"https://www.figma.com/design/AqT6Q5R4KyYqUb6n5uO2XE/%F0%9F%A7%A9-kds-Components";

const meta: Meta<typeof ListItemDivider> = {
title: "Containers/ListItem/Divider",
component: ListItemDivider,
const meta: Meta<typeof KdsDivider> = {
title: "Accessories/Divider",
component: KdsDivider,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component:
"Internal helper that renders the faint divider used between grouped list items.",
"Internal helper that renders the faint divider used between grouped items.",
},
},
design: {
Expand All @@ -31,7 +31,7 @@ const meta: Meta<typeof ListItemDivider> = {

export default meta;

type Story = StoryObj<typeof ListItemDivider>;
type Story = StoryObj<typeof KdsDivider>;

export const Default: Story = {
play: async ({ canvasElement }) => {
Expand All @@ -44,7 +44,7 @@ export const Default: Story = {
// TextOverflow story does not apply here

export const DesignComparator: Story = buildDesignComparatorStory({
component: ListItemDivider,
component: KdsDivider,
wrapperStyle: { width: "316px" },
designsToCompare: {
Default: {
Expand All @@ -57,6 +57,6 @@ export const DesignComparator: Story = buildDesignComparatorStory({
});

export const AllCombinations: Story = buildAllCombinationsStory({
component: ListItemDivider,
component: KdsDivider,
combinationsProps: [{}],
});
7 changes: 2 additions & 5 deletions ...tItem/ListItemDivider/ListItemDivider.vue → ...ts/src/accessories/Divider/KdsDivider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<template>
<hr class="kds-list-item-divider" />
<hr class="kds-divider" />
</template>

<style scoped>
.kds-list-item-divider {
flex-shrink: 0;
width: 100%;
padding: 0;
.kds-divider {
margin: 0 0 var(--kds-spacing-container-0-12x);
border: none;
border-bottom: var(--kds-border-base-subtle);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/accessories/Divider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as KdsDivider } from "./KdsDivider.vue";
2 changes: 2 additions & 0 deletions packages/components/src/accessories/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@ export type * from "./InlineMessage";

export * from "./DonutChart";
export type * from "./DonutChart";

export * from "./Divider";
11 changes: 9 additions & 2 deletions packages/components/src/containers/ListContainer/KdsListContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script setup lang="ts">
import { computed, nextTick, ref, useId, useTemplateRef, watch } from "vue";

import { KdsDivider } from "../../accessories";
import KdsEmptyState from "../../layouts/EmptyState/KdsEmptyState.vue";
import { KdsListItem } from "../ListItem/KdsListItem";
import { kdsListItemVariant } from "../ListItem/KdsListItem/enums";
import ListItemDivider from "../ListItem/ListItemDivider/ListItemDivider.vue";
import ListItemSectionTitle from "../ListItem/ListItemSectionTitle/ListItemSectionTitle.vue";

import type {
Expand Down Expand Up @@ -332,8 +332,9 @@ defineExpose<KdsListContainerExpose>({
@mousedown="props.controlledExternally && $event.preventDefault()"
@click="!item.disabled && emit('itemClick', toOptionId(item.id))"
/>
<ListItemDivider
<KdsDivider
v-if="item.separator && index < prefixedValues.length - 1"
class="kds-list-item-divider"
role="presentation"
aria-hidden="true"
/>
Expand Down Expand Up @@ -386,4 +387,10 @@ defineExpose<KdsListContainerExpose>({
align-items: center;
justify-content: center;
}

.kds-list-item-divider {
flex-shrink: 0;
width: 100%;
padding: 0;
}
Comment thread
thresharx marked this conversation as resolved.
</style>
1 change: 0 additions & 1 deletion packages/components/src/containers/ListItem/ListItemDivider/index.ts
View file
Open in desktop

This file was deleted.

Loading
Loading