Card Stack ticks all by default #2793

MoshiMoshiMochi · 2026-01-20T07:42:02Z

What is the purpose of this pull request?

resolves #2781

Overview of changes:

All tags are now ticked by default.
Added Select All [ ] feature that can be used to tick/untick all tags in one click
Added basic test cases
Added show-select-all flag as an optional cardstack (defaults to true) & updated the user guide documentation accordingly.

Anything you'd like to highlight/discuss:

Added a watcher on cardStackRef.tagMapping to ensure that once the <card> components register their tags, that the parent automatically adds them to selectedTags. Since selectedTags is now populated on load, all tags appear checked to begin with.
Added mandatory tag "Select All"
2.1 It can be used to toggle all tags to clear/select all tags in
2.2 It syncs with all the selected tags, meaning that unchecking a single tag automatically unchecks "Select All". This is to better signify that not all tags have been selected.
Repurposed showAllTags(showTag) to accept a boolean. It now serves as a master switch to loop through all child cards and set their disableTag state to either true (visible) or false (hidden).
Modified updateTag so that unchecking all cards now displays no other cards. Previously doing so would automatically display all cards again.

See Demo Example 1 (On the functionality of Select All)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance" disable=true>
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance" disabled=true>
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

See Demo Example 2 (On showing/hiding the select all tag)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable show-select-all="FaLsE">
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

UserGuide error? (Resolved)

Shouldn't disable be disabled? See demo example above for reference. Kindly let me know if I'm mistaken or if I should go ahead and fix this since its so small.

markbind/docs/userGuide/syntax/cardstacks.md

Lines 138 to 153 in ca4a65b

    
           ****Options**** 
        
           `cardstack`: 
        
           Name | Type | Default | Description 
        
           --- | --- | --- | --- 
        
           blocks | `String` | `2` | Number of `card` columns per row.<br> Supports: `1`, `2`, `3`, `4`, `6` 
        
           searchable | `Boolean` | `false` | Whether the card stack is searchable. 
        
           `card`: 
        
           Name | Type | Default | Description 
        
           --- | --- | --- | --- 
        
           tag | `String` | `null` | Tags of each card component.<br>Each unique tag should be seperated by a `,`.<br> Tags are added to the search field. 
        
           header | `String` | `null` | Header of each card component.<br> Supports the use of inline markdown elements. 
        
           keywords | `String` | `null` | Keywords of each card component.<br>Each unique keyword should be seperated by a `,`.<br> Keywords are added to the search field. 
        
           disable | `Boolean` | `false` | Disable card. <br> This removes visibility of the card and makes it unsearchable.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Update Card Stack to tick all tags by default

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).

codecov · 2026-01-20T07:44:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71.83%. Comparing base (8a8a0c2) to head (77e1ea9).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2793      +/-   ##
==========================================
+ Coverage   71.75%   71.83%   +0.07%     
==========================================
  Files         134      134              
  Lines        7314     7331      +17     
  Branches     1521     1502      -19     
==========================================
+ Hits         5248     5266      +18     
- Misses       1938     2019      +81     
+ Partials      128       46      -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.

gerteck · 2026-01-22T11:20:58Z

Perhaps we can make the select-all button not always show up, but make it conditional where there is a flag (e.g. showSelectAll) etc that we can set to true to show this button, otherwise, don't show it.

Otherwise, we can do the opposite, by supporting a way to disable the select all button

damithc · 2026-01-22T12:54:21Z

@MoshiMoshiMochi If there are non-trivial UX changes, also provide screenshots of those changes.

MoshiMoshiMochi · 2026-01-24T15:34:03Z

Hi @gerteck & @damithc are these changes something similar to what you had in mind?

All tags are now ticked by default.
Added Select All [ ] feature that can be used to tick/untick all tags in one click
Added basic test cases
Added show-select-all flag as an optional cardstack (defaults to true) & updated the user guide documentation accordingly.

See Demo Example 1 (On the functionality of Select All)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance" disable=true>
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance" disabled=true>
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

See Demo Example 2 (On showing/hiding the select all tag)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable show-select-all="FaLsE">
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

damithc · 2026-01-24T15:44:53Z

@MoshiMoshiMochi I think the Select all toggle should appear quite different from all the other tags. For example, without any background colour and text in bold.

MoshiMoshiMochi · 2026-01-24T15:50:25Z

@MoshiMoshiMochi I think the Select all toggle should appear quite different from all the other tags. For example, without any background colour and text in bold.

Noted will get to work on that!

MoshiMoshiMochi · 2026-01-24T16:52:27Z

Hi Prof @damithc! I've set the Select All toggle to be transparent with its text in bold. Additionally, I also decided to transform the text to uppercase fully to perhaps standout further from the others which aren't. Kindly see

I've also experimented using a linear gradient. This could possibly be another way of making it stand out further since all other toggle badges use a single color. I also tried experimenting with radial/conic gradients but I couldn't really come up with something that I felt blended in with the current design.

Linear Gradient sweeping across

2. Linear Gradient fading in and out and in

3. Rainbow linear gradient at 45deg (as a joke of course haha)

Do let me know if this is something you had in mind (, which option you prefer), and/or if there are other styling options/ideas you would like me to experiment/proceed with.

damithc · 2026-01-24T17:36:33Z

Do let me know if this is something you had in mind (, which option you prefer), and/or if there are other styling options/ideas you would like me to experiment/proceed with.

@MoshiMoshiMochi I like the first one but let's go without the border. I think no need for bold either. If possible, experiment putting the tick box on the left of the text for Select all, to see if that works better.

MoshiMoshiMochi · 2026-01-25T04:14:25Z

Hi prof @damithc! As requested I have experimented with removing the bold, border and also by moving the checkbox to the left.

Here is the checkbox on the right like usual for comparison.

I also tried experimenting with moving all the individual tags to the second row, while keeping the first row for the Search Bar & Select All (and perhaps other future tools for filtering like colour filtering).

Kindly let me know if this is something you had in mind (, which option you prefer), and once more if there are other styling options/ideas you would like me to further experiment/proceed with.

damithc · 2026-01-25T04:53:02Z

@MoshiMoshiMochi I prefer the first one. It still looks bold. Likely the UI control used is using bold by default. You may have to explicitly use non-bold.

Separately, I'm wondering if we should auto-omit the select-all if there are fewer than N tags (e.g., 3). This can be a separate PR though.

MoshiMoshiMochi · 2026-01-25T06:39:14Z

Hi prof @damithc! Kindly view the changes below, I've explicitly set the font weight for the select all to be normal. Do let me know if this is what you had in mind.

Separately, I'm wondering if we should auto-omit the select-all if there are fewer than N tags (e.g., 3). This can be a separate PR though.

Yep sounds like a great idea! The current design already checks the length of the tagmapping is > 0 before it displays the Select All toggle. All it would require would be to updating this with a constant value (like the suggested 3) or we could pass an additional flag within cardstack so that the user can control this in the future.

damithc · 2026-01-25T07:24:04Z

Hi prof @damithc! Kindly view the changes below, I've explicitly set the font weight for the select all to be normal. Do let me know if this is what you had in mind.

Separately, I'm wondering if we should auto-omit the select-all if there are fewer than N tags (e.g., 3). This can be a separate PR though.

Yep sounds like a great idea! The current design already checks the length of the tagmapping is > 0 before it displays the Select All toggle. All it would require would be to updating this with a constant value (like the suggested 3) or we could pass an additional flag within cardstack so that the user can control this in the future.

Looks good. Let's go with this one.

Yep sounds like a great idea! The current design already checks the length of the tagmapping is > 0 before it displays the Select All toggle. All it would require would be to updating this with a constant value (like the suggested 3) or we could pass an additional flag within cardstack so that the user can control this in the future.

Let's set it to >3.

MoshiMoshiMochi · 2026-01-25T08:14:58Z

Hi prof @damithc! I've made the changes as requested.

From the example below, we can see that while both cardstacks have 3 cards, the cardstack below only has 3 tags and therefore the Select All toggle is automatically disabled as it doesn't meet the threshold requirement of having >3 tags.

e.g. serving this file

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
</cardstack>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation">
    Do what you can, with what you have, where you are
  </card>
</cardstack>
Hello world

damithc

The current UX looks good, @MoshiMoshiMochi
No further comments (on the UX aspect) from me.

Copilot

Pull request overview

This PR updates the cardstack component so that tags are selected by default, adds a “Select All” control, wires it through the Markdown/HTML processing pipeline, and documents the new behavior.

Changes:

Frontend: CardStack.vue now initializes all tags as selected on load, adds an optional “Select All” badge that can toggle all tags, and changes the behavior so that unselecting all tags hides all cards instead of showing all.
Core processing: MdAttributeRenderer and NodeProcessor now normalize and pass through a show-select-all attribute on <cardstack> elements, treating any non-"false" value as true and supporting case-insensitive input.
Tests & docs: Added/updated Jest tests for CardStack behavior and show-select-all standardization, updated snapshots, and extended the user guide (cardstacks.md) to document show-select-all and to correct disable → disabled.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`packages/vue-components/src/cardstack/CardStack.vue`	Implements default selection of all tags, the `showSelectAll` prop, the `Select All` badge UI, and updated tag filtering logic (`showAllTags`, `toggleAllTags`).
`packages/vue-components/src/__tests__/CardStack.spec.js`	Adds tests for default tag selection, Select All toggle behavior, visibility thresholds, and show-select-all prop handling; one test’s assertion currently doesn’t validate card hiding as intended.
`packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap`	Updates snapshots to reflect the new Select All v-if block and the initial checkmark on tag badges.
`packages/core/src/html/NodeProcessor.ts`	Routes `<cardstack>` nodes through `MdAttributeRenderer.processCardStackAttributes` during preprocessing.
`packages/core/src/html/MdAttributeRenderer.ts`	Adds `processCardStackAttributes` to normalize `show-select-all` values on `<cardstack>` nodes, using lodash `isNil`.
`packages/core/test/unit/html/NodeProcessor.test.ts`	Adds a unit test to verify `processNode` normalizes `cardstack` `show-select-all` attributes (`fAlSe` → `false`, other values → `true`, absent → undefined).
`docs/userGuide/syntax/cardstacks.md`	Documents the new `show-select-all` option and corrects the `card` option name from `disable` to `disabled`.

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

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

gerteck

thanks for working on this, highlighted some changes!

packages/core/src/html/MdAttributeRenderer.ts

packages/core/src/html/NodeProcessor.ts

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

packages/core/test/unit/html/NodeProcessor.test.ts

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

gerteck

LGTM, just need you to remove the commented out code

do you intend to shift the fuzzy boolean logic to the vue component? Or do away with it entirely? either should be ok

packages/core/src/html/MdAttributeRenderer.ts

packages/core/src/html/NodeProcessor.ts

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

gerteck

lgtm

MoshiMoshiMochi added 4 commits January 20, 2026 13:02

Add watcher to populate selectedTags on first load

3b6bbf4

Add toggle all tag indicator

4502021

Add test cases

79cbd4c

Remove old redundant code comments

c9fde7b

MoshiMoshiMochi added 2 commits January 22, 2026 18:12

Fix disable documentation error

c8ec29c

Merge remote-tracking branch 'upstream' into card-stack-default-tick-all

23b0cbb

MoshiMoshiMochi added 8 commits January 23, 2026 11:53

Add optional showSelectAll flag to disable selectAll tag

8b9d32f

Add testcases and minor edits to toggle logic

4753f31

Merge remote-tracking branch 'upstream' into card-stack-default-tick-all

12fd8f6

Update user guide

bd65fb8

Rebuild core-web package

fbaefbf

Add more robust check for null or undefined

a91c8c0

Update showSelectAll to accept string too

7be747f

Undid core-web changes and updated package-lock.json

b4adcb1

MoshiMoshiMochi requested a review from gerteck January 24, 2026 15:34

MoshiMoshiMochi added 3 commits January 25, 2026 15:41

Add select all styling and minimum tags requirement

96c9049

Add & fix test cases

b0754e0

Fix indentation issue

56f105a

Update user guide to reflect latest changes

b5021c9

damithc approved these changes Jan 25, 2026

View reviewed changes

MoshiMoshiMochi added 5 commits January 25, 2026 16:25

Revert package-lock.json changes

ed7b12e

Sync package-lock with package.json

6abd147

Merge remote-tracking branch 'upstream' into card-stack-default-tick-all

2cb9264

Sync package-lock.json to upstream

3798be0

Add test cases for core package

4cdfaab

gerteck requested a review from Copilot January 27, 2026 05:18

Copilot started reviewing on behalf of gerteck January 27, 2026 05:19 View session

Copilot AI reviewed Jan 27, 2026

View reviewed changes

packages/vue-components/src/__tests__/CardStack.spec.js Outdated Show resolved Hide resolved

Fix test per code review suggestion

f02ab17

gerteck requested changes Jan 27, 2026

View reviewed changes

MoshiMoshiMochi added 3 commits January 27, 2026 16:41

Refactor code as per suggestion

447935f

Refactor CardStack and Card to remove internal dependency

aa721d3

Remove redundant old code

13b3808

MoshiMoshiMochi requested a review from gerteck January 27, 2026 10:15

gerteck requested changes Jan 27, 2026

View reviewed changes

Remove redundant old code comments section

38e6c55

MoshiMoshiMochi requested a review from gerteck January 27, 2026 14:01

Merge branch 'master' into card-stack-default-tick-all

77e1ea9

gerteck approved these changes Jan 27, 2026

View reviewed changes

gerteck merged commit 6da5bc9 into MarkBind:master Jan 27, 2026
11 checks passed

github-actions bot added the r.Minor Version resolver: increment by 0.1.0 label Jan 27, 2026

	**Options**

	`cardstack`:
	Name \| Type \| Default \| Description
	--- \| --- \| --- \| ---
	blocks \| `String` \| `2` \| Number of `card` columns per row.<br> Supports: `1`, `2`, `3`, `4`, `6`
	searchable \| `Boolean` \| `false` \| Whether the card stack is searchable.

	`card`:
	Name \| Type \| Default \| Description
	--- \| --- \| --- \| ---
	tag \| `String` \| `null` \| Tags of each card component.<br>Each unique tag should be seperated by a `,`.<br> Tags are added to the search field.
	header \| `String` \| `null` \| Header of each card component.<br> Supports the use of inline markdown elements.
	keywords \| `String` \| `null` \| Keywords of each card component.<br>Each unique keyword should be seperated by a `,`.<br> Keywords are added to the search field.
	disable \| `Boolean` \| `false` \| Disable card. <br> This removes visibility of the card and makes it unsearchable.

Card Stack ticks all by default #2793

Card Stack ticks all by default #2793

Uh oh!

Conversation

MoshiMoshiMochi commented Jan 20, 2026 • edited by gerteck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

See Demo Example 1 (On the functionality of Select All)

See Demo Example 2 (On showing/hiding the select all tag)

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

gerteck commented Jan 22, 2026

Uh oh!

damithc commented Jan 22, 2026

Uh oh!

MoshiMoshiMochi commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

See Demo Example 1 (On the functionality of Select All)

See Demo Example 2 (On showing/hiding the select all tag)

Uh oh!

damithc commented Jan 24, 2026

Uh oh!

MoshiMoshiMochi commented Jan 24, 2026

Uh oh!

MoshiMoshiMochi commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

damithc commented Jan 24, 2026

Uh oh!

MoshiMoshiMochi commented Jan 25, 2026

Uh oh!

damithc commented Jan 25, 2026

Uh oh!

MoshiMoshiMochi commented Jan 25, 2026

Uh oh!

damithc commented Jan 25, 2026

Uh oh!

MoshiMoshiMochi commented Jan 25, 2026

Uh oh!

damithc 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

Reviewed changes

Uh oh!

Uh oh!

gerteck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MoshiMoshiMochi commented Jan 20, 2026 •

edited by gerteck

Loading

codecov bot commented Jan 20, 2026 •

edited

Loading

MoshiMoshiMochi commented Jan 24, 2026 •

edited

Loading

MoshiMoshiMochi commented Jan 24, 2026 •

edited

Loading