Skip to content

chore(kolibri): upgrade spec to v4 #1424

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

Open
deleonio wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(kolibri): upgrade spec to v4 #1424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f676cea
Add key prop to anchor element in ComponentNameMatrix for unique iden…
deleonio Mar 20, 2026
c58df36
Update KoliBri links to version 4 across multiple components and adju…
deleonio Mar 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
1 change: 1 addition & 0 deletions site/src/components/component-name-matrix.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const ComponentNameMatrix = (props) => {

return foundComponent ? (
<a
key={matchName}
title={foundComponent.name}
target="_blank"
rel="noopener noreferrer"
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/accordion.research.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ For lack of a better term, I'll call these exact-exclusive.

Of the design systems below, the following are never exclusive:
* Carbon Design System
* KoliBri
* [KoliBri](https://public-ui.github.io/en/docs/components/accordion)
* Lightning Design System,
* Lion

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/breadcrumb.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ A `<breadcrumb />` trail consists of a list of links to the parent pages of the
- [Carbon](https://www.carbondesignsystem.com/components/breadcrumb/code/)
- [Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb)
- [FAST](https://explore.fast.design/components/fast-breadcrumb)
- [KoliBri](https://public-ui.github.io/docs/components/breadcrumb)
- [KoliBri](https://public-ui.github.io/en/docs/components/breadcrumb)
- [Lightning](https://www.lightningdesignsystem.com/components/breadcrumbs/)
- [Semantic UI](https://semantic-ui.com/collections/breadcrumb.html)

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ The `<checkbox>` control is primarily leveraged to indicate a binary state. For
## Prior Art/Examples

- [Checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
- [KoliBri](https://public-ui.github.io/docs/components/input-checkbox)
- [KoliBri](https://public-ui.github.io/en/docs/components/input-checkbox)
- [WAI-ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices/#checkbox)
- [WHATWG](<https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)>)

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/file.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ There are no risks or challenges presented as a part of this proposal.
- [Bootstrap](https://getbootstrap.com/docs/5.3/forms/form-control/#file-input)
- [Carbon](https://www.carbondesignsystem.com/components/file-uploader/usage/)
- [Evergreen](https://evergreen.segment.com/components/filepicker)
- [KoliBri](https://public-ui.github.io/docs/components/input-file)
- [KoliBri](https://public-ui.github.io/en/docs/components/input-file)
- [Materialise](https://materializecss.com/text-inputs.html)
- [MOJ](https://moj-design-system.herokuapp.com/components/multi-file-upload)

Expand Down
1 change: 1 addition & 0 deletions site/src/pages/components/select.research.behavior.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,3 +288,4 @@ wasn't expecting. Using the following repro steps:
| Lightning (uses native) | Retains the previously selected option |
| Material Components | Retains the previously selected option |
| Semantic | Retains the previously selected option |
| KoliBri | Closes the dropdown list (retains the previously selected option) |
2 changes: 1 addition & 1 deletion site/src/pages/components/switch.explainer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ Toggles should never require users to press a button to apply the settings. [^5]
| [Primer (uses button)](https://primer.style/design/components/toggle-switch) | button | ✅ | | |
| [Bootstrap (uses checkbox)](https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches) | checkbox | | | ✅ |
| [Lightning (uses checkbox)](https://www.lightningdesignsystem.com/components/checkbox-toggle/) | checkbox | | | ✅ |
| [KoliBri (uses checkbox)](https://public-ui.github.io/docs/components/input-checkbox) | checkbox | | | ✅ |
| [KoliBri (uses checkbox)](https://public-ui.github.io/en/docs/components/input-checkbox) | checkbox | | | ✅ |
| [Semantic UI (uses checkbox)](https://semantic-ui.com/modules/checkbox.html) | checkbox | | | ✅ |
| [Spectrum (uses checkbox)](https://spectrum.adobe.com/page/switch/) | checkbox | | | ✅ |
| [Tailwind Elements (uses checkbox)](https://tailwind-elements.com/docs/standard/forms/switch/) | checkbox | | | ✅ |
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,6 @@ Data grid implements the [grid role](https://www.w3.org/TR/core-aam-1.1/#role-ma
| Ant | [Table](https://ant.design/components/table/) | [Playground](https://ant.design/components/table/) | `<table>` | JSON object, with custom render function defined at column level |
| Auth0 | [Table](https://styleguide.auth0.com/components/tables) | - | `<table>` | - |
| Evergreen | [Table](https://evergreen.segment.com/components/table) | [Playground](https://codesandbox.io/s/evergreen-playground-component-fjbly) | `<div>` | - |
| KoliBri | [Table](https://public-ui.github.io/docs/components/table) | [Playground](https://codesandbox.io/s/kolibri-public-ui-react-samples-w5u37c) | `<table>` | JSON object, with custom render function defined at column level |
| KoliBri | [TableStateful](https://public-ui.github.io/en/docs/components/table-stateful) / [TableStateless](https://public-ui.github.io/en/docs/components/table-stateless) | [Playground](https://codesandbox.io/s/kolibri-public-ui-react-samples-w5u37c) | `<table>` | JSON object, with custom render function defined at column level |
| Semantic UI | [Table](https://semantic-ui.com/collections/table.html) | [Playground](https://jsfiddle.net/ca0rovs3/) | `<table>` | - |
| Aria | [Data grid](https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html), [Table](https://www.w3.org/TR/wai-aria-practices/#table) | - | `<div role="grid">`,`<table>` | - |
2 changes: 1 addition & 1 deletion site/src/pages/components/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Some scenarios require an indicator that highlights the currently active tab the
- [Material Design](https://material.io/components/tabs/#anatomy)
- [Windows (UWP)](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/tab-view)
- [Ant Design](https://ant.design/components/tabs/)
- [KoliBri](https://public-ui.github.io/docs/components/tabs)
- [KoliBri](https://public-ui.github.io/en/docs/components/tabs)
- [Lightning Design](https://www.lightningdesignsystem.com/components/tabs/)

#### Tabs Implementations
Expand Down
5 changes: 5 additions & 0 deletions site/src/pages/components/tabs.research.parts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ The most fundamental aspect of a Tab Label is text, though some systems support
| Semantic UI | Not explicitly supported ('menus' separate from the component they call 'tabs' which is more of a set of mutually exclusive selectable sections, but looks like these menus can contain embedded custom content) |
| Shoelace | (not specifically supported, but seems to support embedding custom content) |
| Vaadin | (not specifically supported, but explicitly supports embedding custom content) |
| KoliBri | Supported via `_icons` property on each tab definition |

<figure>
<img src="https://lh4.googleusercontent.com/JMQRH-7jzLBgAnLtOr7zTNKL1Oe0ZKgV71wkwen1MRrXnHi1BNSDCAo_ZW0cGyWiVkus3eEkDGs2BQW05pBG5Ggp7rDLQzcSZFfhBx4xten5DsE-ZYJmIvF_6pFSkLVU-Mz34PB6"
Expand Down Expand Up @@ -164,6 +165,7 @@ All implementations support this view, somehow (in some cases only the Tab Bar i
| Semantic-UI | It seems the component that is called tabs here is actually a mutally exclusive selection of items for content - a tab list is wholly separate a concern here, an exercise left to authors as a menu - but it seems it could be said to loosely support this |
| Shoelace | ![Shoelace supports horizontal top grouping](https://lh3.googleusercontent.com/r_wnzafQTxPyTYTnwrfeQ1VK2m77zIUtz5CtWcW-1X2OF1q0kUuWs1PZ-iUhjHfjcp-hjSxF1GR0HlviYODjC6INwblpsPLhHLPxUytMclmCRaGBeCSKD4NLBqmCle7arnTRlaJc) |
| Vaadin | ![Vaadin supports horizontal top grouping](https://lh4.googleusercontent.com/ZnpJNFDtkVMiG414XfKAGOaTwlAsIWelu1t0tVoGLq_5mba2aYX4sn1xadBhovcBDgtmPdqmsUj5mNZQhDWPpB6A0ZxtCeTifjD9NceVUTHAFTyDG-zwBcz0eKGdt6pWNyaewNZ8) |
| KoliBri | Supported (`_align="top"`, default) |

#### Vertical Left (inline-start)

Expand All @@ -182,6 +184,7 @@ Many tabs implementations also support tabs grouped along the left edge of the c
| semantic-ui | It seems the Tab List is wholly separate a concern here, an exercise left to authors generally triggered by a menu, so.. unclear? |
| Shoelace | ![Shoelace supports vertical left tabs](https://lh4.googleusercontent.com/MxDcBFOjQBID4ESZ3Us5rLqaop4hAvcCDiFNln3KvrrOLF9mAuiDYpQEA6FIMP53jBhRsiPCeGmNhBMlaqilrtg-ImAQJGcc44g1BQde3jf13t7afEMt4pjqKvAnPtEtzBY6cUwY) |
| Vaadin | <figure><img src="https://lh5.googleusercontent.com/3Nlk-Zvpt04HKiKXRt9D2s-egTo1GfONF_wXv0bvjmQjnklPPKbEzktI24s-LoDf2RT06PSippl_2qDHJ5pXR8jqQeEFUpcDEQIYQ4TIBkClPjsTj2jEUq_FwHQOm4IrTBhLqkH9" alt="Three section names stacked on onto each other. Each name is right aligned to other names. Vertical blue line on the left of selected tab." /><figcaption>(bar only - supports 'vertical', but at least by default this seems useful for left)</figcaption></figure> |
| KoliBri | Supported (`_align="left"`) |

#### Vertical Right (inline-end)

Expand All @@ -200,6 +203,7 @@ Some tabs implementations support tabs grouped along the right edge of the conte
| semantic-ui | It seems the Tab List is wholly separate a concern here, an exercise left to authors generally triggered by a menu, so.. unclear? |
| Shoelace | TODO: missing screenshot from https://shoelace.style/components/tab-group |
| Vaadin | <figure><img src="https://lh5.googleusercontent.com/3Nlk-Zvpt04HKiKXRt9D2s-egTo1GfONF_wXv0bvjmQjnklPPKbEzktI24s-LoDf2RT06PSippl_2qDHJ5pXR8jqQeEFUpcDEQIYQ4TIBkClPjsTj2jEUq_FwHQOm4IrTBhLqkH9" alt="Vertically positions section headers as text" /><figcaption>(bar only - supports 'vertical', but at least by in theory could be used for right, though internationalization could be an issue</figcaption></figure> |
| KoliBri | Supported (`_align="right"`) |

#### Horizontal Bottom (block-end)

Expand All @@ -217,6 +221,7 @@ Some tabs implementations support tabs grouped along the right edge of the conte
| semantic-ui | It seems the Tab List is wholly separate a concern here, an exercise left to authors generally triggered by a menu, so.. unclear? |
| Shoelace | ![Shoelace supports horizontal bottom grouping](https://lh6.googleusercontent.com/agk_AwBNYPzat-MVjutIK38HkMr56dJqGfAni-PTJciaeo8auaLYzxU2t30C5fCNVfIDY-Rylr0qIpS4NNOln0-8AiMEqlEUCBX-UJ0_czbL8B_N7QdGFpmvrXq6ye9IAneGTYk8) |
| Vaadin | (bar only, though technically perhaps partially supported by the fact that it is separated from content) |
| KoliBri | Supported (`_align="bottom"`) |

Note: Some can switch any (automatically or via attribute) to ungrouped/inline.

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/components/tooltip.research.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import Concepts from '../../components/concepts'
| [Evergreen](https://codesandbox.io/s/8h1ync) | No | Yes | Only accepts textual content |
| [UI Fabrik](https://codepen.io/utilitybend/pen/MWZZRoB/7bba995cc9c04cd05905ece99c5c06eb) | No | Yes | Linked example could potentially be nested, but not intentional |
| [FAST](https://explore.fast.design/components/fast-tooltip) | Yes | Yes (but not when nested, previous stays open) | In the sandbox (link on library) nesting was possible to achieve |
| [KoliBri](https://public-ui.github.io/docs/components/tooltip) | To be investigated | To be investigated | |
| [KoliBri](https://public-ui.github.io/en/docs/components/tooltip) | To be investigated | To be investigated | |
| [Lightning Design System](https://www.lightningdesignsystem.com/components/tooltips/) | To be investigated | To be investigated | |
| [Material Components Web](https://m2.material.io/components/tooltips/web/) | To be investigated | Yes | It can contain custom HTML, further investigation necessary for nesting |
| [Semantic UI](https://semantic-ui.com/modules/popup.html#/definition) | No | Not the parent when nested | Linked example could potentially be nested, but not intentional |
Expand Down
Loading