feat/specify cardstack tags order and colour #2794
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Allow users to define tag order and custom colors using a <tags> element inside <cardstack>. Tags can be assigned hex colors and will appear in the specified order. Features: - Parse <tags> element containing <tag> definitions with name and color attributes - Support custom hex colors (e.g., #28a745) for tag badges - Automatically calculate text color (black/white) based on background luminance - Apply custom tag ordering - defined tags appear first, undefined tags follow with default colors - Escape JSON in HTML attributes using HTML entities to prevent SSR warnings Implementation: - MdAttributeRenderer: Extract tag configs from <tags> element, store as data-tag-configs attribute with HTML entity escaping - NodeProcessor: Process cardstack nodes to extract tag configurations - CardStack.vue: Parse tag configs, apply custom ordering and colors to filter badges - Card.vue: Apply matching custom colors to card tags Backward compatible: CardStacks without <tags> element continue to use default Bootstrap color cycling.
Document the new <tags> element feature that allows users to: - Define custom tag order within cardstacks - Assign custom hex colors to tags - Have undefined tags appear with default colors after custom tags Includes: - New documentation section "Custom Tag Order and Colors" - Example demonstrating <tags> and <tag> usage with hex colors - Updated options table documenting <tags> and <tag> elements with their attributes
Rebuild minified CSS and JavaScript bundles to include: - CardStack and Card component changes for custom tag ordering and colors - HTML entity escaping for tag configurations - Text color calculation for custom hex color backgrounds
Update expected test outputs to include new CSS and JS bundles with CardStack custom tag ordering and color features. Test snapshots updated for all test sites: - test_site - test_site_algolia_plugin - test_site_convert (basic and navigation) - test_site_special_tags - test_site_table_plugin - test_site_templates (default, minimal, portfolio, project) Changes include updated markbind.min.css and markbind.min.js files with the new CardStack component code.
- Add component reference to cardStackRef object - Fix updateTagMapping to access props via component reference instead of this.$parent - Ensure custom tag configs are properly accessible during tag mapping updates
- Update all test snapshots with rebuilt dist files - Reflects changes from component reference fix in CardStack.vue
Contributor
|
Thanks for taking this up, @yihao03 |
- Update to vfmPlugin API (was createVfm) in index.js - Remove unused import of vue-final-modal CSS (not exported in new version) - Use inject() for $vfm in Trigger component (was useVfm composable) - Change vfm.open() to vfm.show() per new API in Trigger component - Update Modal tests to manually provide $vfm instead of using plugin - Remove unused vfmPlugin import from Modal tests - Rebuild dist files with new API - Update functional test snapshots - Update Modal test snapshots All tests passing after vue-final-modal library update.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is the purpose of this pull request?
Overview of changes:
Add functionality to allow users to specify tags order and colour mentioned in issue #2783
<tags>element that can be nested inside<cardstack>to define custom tag configurations<tag>element supportsname(required) andcolor(optional, hex format) attributes<tags>element<tags>appear after custom tags with default Bootstrap colors<tags>continue to work as beforeAnything you'd like to highlight/discuss:
This PR is done for the CS3281 Week 2 activity: Creating a PR with AI Assistance.
Following the recent controversies around ClaudeCode and OpenCode, I have decided to push OpenCode
and see how far it could go. Specifically, I have used OpenCode with Claude Sonnet 4.5 through GitHub Copilot.
All code changes is almost entirely generated by the AI, with minimal human intervention.
Testing instructions:
npm run build:webcd docs && ../packages/cli/index.js servehttp://localhost:8080/userGuide/syntaxReference.htmlin your browserProposed commit message: (wrap lines at 72 characters)
Add custom tag order and colors for CardStack component
Allow users to customize the order and colors of tags in CardStack
components using a new element with nested elements.
Users can now specify tag order and colors like:
...Fixes #2783
Checklist: ☑️
Reviewer checklist:
Indicate the SEMVER impact of the PR:
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):