Skip to content

feat: add NcStatsBlock component - #9142

Open
remko48 wants to merge 4 commits into
mainfrom
feat/9126/nc-stats-block
Open

remko48 wants to merge 4 commits into
mainfrom
feat/9126/nc-stats-block

Conversation

@remko48

@remko48 remko48 commented Oct 30, 2026

Copy link
Copy Markdown

☑️ Resolves

Note:

🖼️ Screenshots

00-page-01 00-page-02

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

Styleguidist caches a stylesheet by component name, and the Markdown table and the props table are both called TableRenderer. Whichever rendered first in a session styled both, so after a page with a table in its documentation every props, events and slots table lost its padding, borders and column widths. The Markdown table now renders under its own name with the same styles.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
Renders a single statistic, such as a count on a dashboard: an optional icon in a tinted circle, the name, the value in large type and an optional label. A number is formatted for the user's locale and a string is shown as it is. A variant colors the icon and the value, href or to turn the statistic into a link, loading shows a loading icon instead of the value, and the default slot takes extra content below it.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
…ng the value in narrow cells

In a cell of about 180px the name was cut off with an ellipsis and a seven-digit value stuck out of the cell. The name now wraps, the label moves below the value when there is no room next to it, and the value moves below the icon when it does not fit next to it. The height kept while loading now follows the value's font size and line height, and the docs say that the default slot must not contain links or buttons when the statistic is a link.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
…y uses

The variant colors first read --color-text-info and its siblings, which only exist in the dark high-contrast theme, where they equal --color-info-text and its siblings. They now read those directly, like NcNoteCard.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
@remko48 remko48 added enhancement New feature or request 3. to review Waiting for reviews labels Oct 30, 2026
@remko48
remko48 requested a review from a team as a code owner October 30, 2026 13:07
@remko48 remko48 added the component Component discussion and/or suggestion label Oct 30, 2026
@codecov

codecov Bot commented Oct 30, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.37%. Comparing base (44c25ae) to head (7fd6553).
⚠️ Report is 16 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9142      +/-   ##
==========================================
+ Coverage   59.11%   59.37%   +0.25%     
==========================================
  Files         125      126       +1     
  Lines        4520     4546      +26     
  Branches     1347     1357      +10     
==========================================
+ Hits         2672     2699      +27     
+ Misses       1570     1569       -1     
  Partials      278      278              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

* The value of the statistic.
* A number is formatted for the user's locale, a string is shown as it is.
*/
value: number | string

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Could value be optional while loading? The demo needs :value="0" just to please the prop.

min-width: 0;
overflow: hidden;
color: var(--color-text-maxcontrast);
white-space: nowrap;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Once the label moves below the number it can still get cut with no way to read the rest. What about letting it wrap instead?

This branch has not been deployed

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

Labels

3. to review Waiting for reviews component Component discussion and/or suggestion enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants