Skip to content

Update License bar styles and position#12094

Draft
adrianspdev wants to merge 8 commits intodevelopfrom
feature/dev-issue-2805
Draft

Update License bar styles and position#12094
adrianspdev wants to merge 8 commits intodevelopfrom
feature/dev-issue-2805

Conversation

@adrianspdev
Copy link
Copy Markdown
Contributor

@adrianspdev adrianspdev commented Mar 6, 2026

Context

Restructures the root layout: license notification, pagination, and overlay UI (dialog, empty data state) use dedicated containers. License logic moves to utils/licenseNotification with focus-scope support, Dialog/EmptyDataState render into a shared overlay container.

Changes

Core layout

  • rootAfterGridElement – New .ht-after-grid container for pagination and license bar, width synced on afterRender.
  • rootOverlaysElement – New .ht-overlays container, Dialog and Empty Data State append here instead of rootElement.after().
  • core.js – Switched to initLicenseNotification(instance), after-grid width updated on render for root instance.

License notification

  • utils/licenseNotification.js (new) – Injects product info into rootAfterGridElement when license invalid/expired/missing, registers focus scope for notification links (Tab/Shift+Tab).
  • utils/__tests__/licenseNotification.unit.js (new) – Tests for init, injection, focus scope, and link focus.
  • tableView.js – Removed addClassNameToLicenseElement / removeClassNameFromLicenseElement, license DOM handled by license util only.

Plugins

  • Dialog – Uses overlayContainer (rootOverlaysElement), appends via appendChild. Removed updateHeight(licenseInfoHeight).
  • Empty Data State – Same overlay container, height fixed.
  • Pagination – Uses afterGridElement (rootAfterGridElement), test added for width set after render.

Styles

  • Base:has(> .ht-after-grid > div) for background/border-radius when after-grid has content, radius logic moved to _border-radius.scss. Updated border around wrapper.
  • Border radius – Wrapper/.wtHolder use CSS var, last visible column fix. New rules flatten bottom radius when license/pagination present, radius cleaned up.
  • License notification – Removed margin-top: 10px and styles update.
  • Empty Data State – Flattened bottom border/radius when after-grid has content.
  • Pagination – Single border-radius on bar, table overrides replaced by shared .ht-root-wrapper:has(> .ht-after-grid > div) rules.

Helpers

  • mixed.js_injectProductInfo takes options { className, key, element, releaseDate } and injects into given element.

How has this been tested?

Locally, new and updated test cases

Types of changes

  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Related issue(s):

  1. https://github.com/handsontable/dev-handsontable/issues/2805
  2. https://github.com/handsontable/dev-handsontable/issues/2543

Affected project(s):

  • handsontable

Checklist:


Note

Medium Risk
Changes the core DOM structure and where multiple plugin UIs (dialog, empty data state, pagination, license notice) are mounted, which can affect layout, sizing, and focus navigation across integrations. No auth/data-path changes, but UI regressions are possible due to CSS and rendering adjustments.

Overview
Reworks the Handsontable root DOM to introduce dedicated containers: ht-overlays (for overlay-style UI like empty data state and dialogs) and ht-after-grid (for pagination and the license notification), and wires plugins to mount into these containers instead of inserting adjacent to ht-grid.

Replaces the previous _injectProductInfo call with a new initLicenseNotification() utility that injects the license message into the after-grid area and registers a focus scope for its links; the after-grid container width is kept in sync on afterRender.

Updates empty-data-state sizing to avoid zero-height when height: auto and there are no rows, refreshes/adjusts pagination width/border handling, and revises CSS border-radius/background rules (including :has(...) selectors) plus tests to match the new DOM placement and license markup structure.

Written by Cursor Bugbot for commit d433e61. This will update automatically on new commits. Configure here.

@adrianspdev adrianspdev marked this pull request as draft March 6, 2026 11:54
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Comment thread handsontable/src/plugins/emptyDataState/emptyDataState.js Outdated
Comment thread handsontable/src/plugins/pagination/ui.js
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Mar 6, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9b36549:

Sandbox Source
handsontable-pr-javascript-demo Configuration
handsontable-ts-demo Configuration
handsontable-pr-react-demo Configuration

@github-actions
Copy link
Copy Markdown
Contributor

🏗️ Preview documentation is being built/rebuilt.
Current staging version of documentation will be available at: https://dev-handsontable-feature-dev-issue-2805.netlify.app/docs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant