Add Card Counts to Tag by yihao03 · Pull Request #2828 · MarkBind/markbind

yihao03 · 2026-02-05T02:38:31Z

Add tag counts to cardstack
Add tests for tag counts

What is the purpose of this pull request?

Overview of changes:
Add card counts to tag. Updated the updateTagMapping() function in CardStack.vue to calculate
the number of cards associated with each tag and store this information in the tagMapping.

Displays the count between the tag text and the tickbox in the tags. Closes #2808

Anything you'd like to highlight/discuss:
How should I make it look prettier or is this fine?

Testing instructions:
Run markbind serve -d to serve the docs and checkout the cardstack documentation pages.

Proposed commit message: (wrap lines at 72 characters)
Add card counts to tags in CardStack component

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

Major (when you make incompatible API changes)
Minor (when you add functionality in a backward compatible manner)
Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

what was the old feature that was made obsolete

any replacement feature (if any), and

how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

yihao03 · 2026-02-05T02:39:55Z

this is how it looks like now

codecov · 2026-02-05T02:40:46Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.21%. Comparing base (2f6cb37) to head (90490e8).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2828      +/-   ##
==========================================
+ Coverage   72.20%   72.21%   +0.01%     
==========================================
  Files         134      134              
  Lines        7454     7457       +3     
  Branches     1528     1551      +23     
==========================================
+ Hits         5382     5385       +3     
+ Misses       2026     1944      -82     
- Partials       46      128      +82

☔ View full report in Codecov by Sentry.
📢 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.

Copilot

Pull request overview

This PR adds card count indicators to tags in the CardStack component to help users understand how many cards are associated with each tag. The implementation modifies the tag mapping logic to track counts and displays them in badges alongside the existing tag selection checkmarks.

Changes:

Modified updateTagMapping() function to calculate and store the number of cards associated with each tag
Added a count badge display in the tag UI, positioned between the tag name and the selection checkmark
Added comprehensive test coverage for the tag counting feature including edge cases

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/vue-components/src/cardstack/CardStack.vue	Added count property to tag mappings, updated initialization logic to track tag occurrences, added count badge UI element, and adjusted CSS spacing for tag indicators
packages/vue-components/src/tests/snapshots/CardStack.spec.js.snap	Updated snapshot to reflect the new count badge in tag display
packages/vue-components/src/tests/CardStack.spec.js	Added four new test cases covering count initialization for custom tags, count increments for duplicate tags, count badge display, and badge ordering

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

gerteck · 2026-02-05T11:17:43Z

Can consider adding a boolean flag to set as false or true to disable the count per tag (default: show)

gerteck

lgtm

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T16:26:20Z

packages/vue-components/src/cardstack/CardStack.vue

-        margin: 2px;
        cursor: pointer;
        height: inherit;
        padding: 5px;


The removal of margin: 2px from the .tag-badge class affects all tag badges (including the main tag badge elements and the "Select All" button), not just the count badge. This change should be reconsidered as it may cause unwanted layout changes. If spacing adjustments are needed for the count badge specifically, they should be applied only to .tag-count without removing margins from other badge elements.

Suggested change

padding: 5px;

padding: 5px;

margin: 2px;

Copilot · 2026-02-05T16:26:20Z

packages/vue-components/src/__tests__/CardStack.spec.js

+    const firstTagCountBadge = tagBadges[0].find('.tag-indicator');
+    expect(firstTagCountBadge.text()).toBe('2');


This test selector will need to be updated once the tag-indicator class is removed from the count badge (line 37 of CardStack.vue). After that fix, this should use .find('.tag-count') instead of .find('.tag-indicator') to specifically target the count badge.

Copilot · 2026-02-05T16:26:21Z

packages/vue-components/src/__tests__/CardStack.spec.js

+
+    // Second tag (Failure) should show count 1
+    expect(tagBadges[1].text()).toContain('Failure');
+    const secondTagCountBadge = tagBadges[1].findAll('.tag-indicator')[0];


This test selector will need to be updated once the tag-indicator class is removed from the count badge (line 37 of CardStack.vue). After that fix, this should use .findAll('.tag-count')[0] or .find('.tag-count') instead of .findAll('.tag-indicator')[0] to specifically target the count badge.

Suggested change

const secondTagCountBadge = tagBadges[1].findAll('.tag-indicator')[0];

const secondTagCountBadge = tagBadges[1].find('.tag-count');

Copilot · 2026-02-05T16:26:21Z

packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap

    >
      Short  
+      <span
+        class="badge tag-count bg-light text-dark tag-indicator"


This snapshot will need to be updated after removing the tag-indicator class from the count badge (line 37 of CardStack.vue). The snapshot should be regenerated to reflect the corrected class structure.

Suggested change

class="badge tag-count bg-light text-dark tag-indicator"

class="badge tag-count bg-light text-dark"

Copilot · 2026-02-05T16:26:21Z

packages/vue-components/src/cardstack/CardStack.vue

+    disableTagCount: {
+      type: Boolean,
+      default: false,
+    },


For consistency with the existing showSelectAll prop (line 89), consider renaming disableTagCount to showTagCount with an inverted default value (default: true). This would maintain a consistent positive naming pattern for feature toggle props. While both approaches work functionally, using positive boolean naming (show/enable) is generally preferred over negative naming (disable/hide) for better code readability.

docs/userGuide/syntax/cardstacks.md

Copilot · 2026-02-05T16:26:22Z

packages/vue-components/src/cardstack/CardStack.vue

        @click="updateTag(key[0])"
      >
        {{ key[0] }}&nbsp;
+        <span v-if="!disableTagCount" class="badge tag-count bg-light text-dark tag-indicator">


The count badge should not have the tag-indicator class. This class applies width: 18px (defined at line 313) which is too narrow to properly display count numbers, especially double-digit counts. Remove tag-indicator from this span's classes, leaving only badge tag-count bg-light text-dark.

Suggested change

<span v-if="!disableTagCount" class="badge tag-count bg-light text-dark tag-indicator">

<span v-if="!disableTagCount" class="badge tag-count bg-light text-dark">

yihao03 added 2 commits February 5, 2026 10:26

Add tag counts to cardstack

67a84ee

Add tests for tag counts

a29b68c

yihao03 requested review from Incogdino, Copilot and gerteck and removed request for Copilot and gerteck February 5, 2026 02:43

Copilot started reviewing on behalf of yihao03 February 5, 2026 02:44 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

yihao03 self-assigned this Feb 5, 2026

yihao03 added the c.Feature 🚀 label Feb 5, 2026

yihao03 and others added 2 commits February 5, 2026 13:59

Merge branch 'master' into feat/add-tag-count

83ad773

Merge branch 'master' into feat/add-tag-count

3a0a0f9

yihao03 added 2 commits February 5, 2026 23:55

Update tag style and add ability to disable tag count

accf6af

Update docs and add tests

90490e8

gerteck requested a review from Copilot February 5, 2026 16:19

Copilot started reviewing on behalf of gerteck February 5, 2026 16:20 View session

gerteck approved these changes Feb 5, 2026

View reviewed changes

Copilot AI reviewed Feb 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Card Counts to Tag#2828

Add Card Counts to Tag#2828
yihao03 wants to merge 6 commits intoMarkBind:masterfrom
yihao03:feat/add-tag-count

yihao03 commented Feb 5, 2026 •

edited

Loading

Uh oh!

yihao03 commented Feb 5, 2026

Uh oh!

codecov bot commented Feb 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

gerteck commented Feb 5, 2026

Uh oh!

gerteck left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const firstTagCountBadge = tagBadges[0].find('.tag-indicator');
		expect(firstTagCountBadge.text()).toBe('2');

	const secondTagCountBadge = tagBadges[1].findAll('.tag-indicator')[0];
	const secondTagCountBadge = tagBadges[1].find('.tag-count');

	class="badge tag-count bg-light text-dark tag-indicator"
	class="badge tag-count bg-light text-dark"

	<span v-if="!disableTagCount" class="badge tag-count bg-light text-dark tag-indicator">
	<span v-if="!disableTagCount" class="badge tag-count bg-light text-dark">

Conversation

yihao03 commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yihao03 commented Feb 5, 2026

Uh oh!

codecov bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

gerteck commented Feb 5, 2026

Uh oh!

gerteck left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yihao03 commented Feb 5, 2026 •

edited

Loading

codecov bot commented Feb 5, 2026 •

edited

Loading