CoreUI Data Grid v0.5.0 - Toolbar Parts, Edit Tracking and Data Validation

We are excited to announce the release of CoreUI Data Grid v0.5.0. The toolbar is now built from public parts you can compose and reuse, the grid can track edited cells and validate rows, rows and cells take your own classes, and you can reach a rendered row or cell by its id. This release has breaking changes, mostly in the toolbar and the column chooser, so read the Migration Notes before you upgrade. As always, everything below is available in all four editions - JavaScript, React, Vue, and Angular.

Accessible Focus Traps: Trap the Keyboard, Not the User

Date pickers, comboboxes, menus and popovers all open a panel on top of the page. The moment that panel opens, the keyboard has a question to answer: where does the focus go now, where may it go next, and where does it land when the panel closes? Get it wrong and a keyboard user walks out of an open calendar into the page behind it, or a screen reader user is sent back to the top of the document after picking a date.

This guide covers how to answer those questions in a way that works for keyboard users, screen reader users and everyone using a mouse or a finger. The examples are plain JavaScript, so they apply to any framework.

CoreUI v6 Alpha vs Bootstrap 6 Alpha: What We Took, What We Didn't, and Why

Bootstrap published its first v6 alpha on October 8. CoreUI v6 followed with its first alpha two weeks later. CoreUI has been built on Bootstrap from the start, so the obvious question is how close the two v6 lines are.

The short answer: as close as we could make them, with a list of deliberate exceptions. For every file we share with Bootstrap we follow one rule. Class names, CSS custom properties, options, events and public methods stay the same as in Bootstrap wherever we can manage it, so moving from one to the other does not mean rewriting markup. The code behind those names is a separate question. Where we can do better than Bootstrap without changing a name, we do. Where following Bootstrap would cost our users a migration step that buys them nothing, we don’t.

This post goes through all three cases: what we took, what we left out, and where we kept the name but changed what is behind it.

CoreUI Data Grid v0.4.0 - Safer Lookups and Smoother Virtualization

We are excited to announce the release of CoreUI Data Grid v0.4.0. This release fixes how the grid finds its own cells when a column key contains special characters, makes the Angular edition emit state events only on a real change, ships proper ESM type declarations, and improves virtualized scrolling. As always, everything below is available in all four editions - JavaScript, React, Vue, and Angular.

CoreUI Scheduler v0.2.0 - Controlled Date and View, CoreUI Controls, Server Rendering

We are excited to announce the release of CoreUI Scheduler v0.2.0, the first release since 0.1.0-rc.0. In React, Vue and Angular, date and view are now controlled whenever you set them, so the scheduler moves only when your state does. The toolbar and the edit dialog are built from CoreUI’s own buttons and form controls, the bindings render on the server, and locales with other calendars or digits are written correctly from the hour axis to the screen reader announcements. As always, everything below is available in all four editions - JavaScript, React, Vue, and Angular.

CoreUI v6 Alpha: What Changes and Why

The first alpha of CoreUI v6 is on npm. It covers three packages: CoreUI PRO for Bootstrap (@coreui/coreui-pro), for React (@coreui/react-pro) and for Vue (@coreui/vue-pro), each published as 6.0.0-alpha.0 under the next tag. The free editions and Angular follow in later alphas.

Two weeks earlier the Bootstrap team published the first Bootstrap 6 alpha. CoreUI has always been built on Bootstrap, and v6 follows the same architecture: cascade layers, a token map per component, theme classes and colours computed in the browser. Where a class, token, option or event exists in both libraries, it almost always has the same name. What we took from Bootstrap 6, what we did not take and why is the subject of a separate post. This one is about what v6 gives you.

It is an alpha. The API can still change before the release candidate, so pin the exact version and keep it out of production for now.

CoreUI PRO for React v6.0.0-alpha.0 - First v6 Alpha

We are pleased to announce CoreUI PRO for React v6.0.0-alpha.0, the first alpha of v6. It is built on CoreUI PRO v6.0.0-alpha.0, and each component now imports the stylesheet it renders into, so an app ships only the CSS it uses. The API can still change before the release candidate, so pin the exact version and do not use it in production yet. The v6 documentation is published next to the v5 docs.

CoreUI PRO for Vue v6.0.0-alpha.0 - First v6 Alpha

We are pleased to announce CoreUI PRO for Vue v6.0.0-alpha.0, the first alpha of v6. It is built on CoreUI PRO v6.0.0-alpha.0, and each component now imports the stylesheet it renders into, so an app ships only the CSS it uses. The API can still change before the release candidate, so pin the exact version and do not use it in production yet. The v6 documentation is published next to the v5 docs.

CoreUI PRO v6.0.0-alpha.0 - First v6 Alpha

We are pleased to announce CoreUI PRO v6.0.0-alpha.0 for Bootstrap, the first alpha of v6. The JavaScript is now written in TypeScript and ships its own type declarations, positioned components move from Popper to Floating UI, one stylesheet serves both text directions, and dist/css gains a stylesheet per component. The API can still change before the release candidate, so pin the exact version and do not use it in production yet. The v6 documentation is published next to the v5 docs.

Focusable Is Not Selectable: A Keyboard Focus Model for Date Grids

Open almost any date picker, press Tab until you reach the grid, and focus lands on a day. Which day it can land on, and which days the arrow keys can reach, comes down to one small decision that most implementations make without noticing: can an unavailable date receive focus?

The intuitive answer is no. A disabled date is disabled, so you render it as <button disabled>, the browser skips it, and you move on. It looks right in a demo. It stops being right as soon as a real product starts disabling dates: weekends, public holidays, fully booked days, a minimum notice period, a cut-off time.

This post describes the model we use in the CoreUI v6 Calendar, and why: a cell’s focusability depends only on the calendar’s limits. Everything else decides only whether the cell can be selected.