feat(react): add Card variant prop, type fixes, and Pro app#85
Merged
wangdicoder merged 17 commits intomasterfrom Mar 28, 2026
Merged
feat(react): add Card variant prop, type fixes, and Pro app#85wangdicoder merged 17 commits intomasterfrom
wangdicoder merged 17 commits intomasterfrom
Conversation
- NativeSelect children type now accepts arrays of ReactElements - Table ColumnType.dataIndex is now optional for action columns - Updated getValue helper to handle undefined dataIndex gracefully
- Add CardVariant type: 'outlined' | 'elevated' | 'filled' - outlined: border (default, same as bordered=true) - elevated: box-shadow using --ty-shadow-card token - filled: subtle background using --ty-color-fill token - variant takes precedence over deprecated bordered prop - Full backward compatibility: existing bordered prop still works - Added Variant demo and updated docs (EN + CN)
Next.js 15 static site with 20 block categories and 25 blocks showcasing @tiny-design/react components. Features include: - Live preview with responsive viewport toggle (desktop/tablet/mobile) - Source code view with syntax highlighting and copy button - Light/dark theme support with anti-FOUC script - Static export for GitHub Pages deployment at /tiny-design/pro/
- Add "Pro" link with "New" badge to docs header navigation - Update deploy-site.yml to build and merge pro app output into the combined GitHub Pages deployment at /tiny-design/pro/
Replace direct component imports with react-runner's useRunner hook. Blocks are now rendered from their raw source strings, making the source code the single source of truth for both preview and code view. This removes the duplicate dynamic import per block.
Existing Next.js oneOf rules were compiling TSX before the asset/source loader could read the original text. Now ?raw queries are excluded from all oneOf sub-rules so the raw source is preserved as-is.
In dev mode, Next.js appends import.meta.webpackHot HMR code to asset/source modules, causing react-runner's sucrase transform to fail with "Cannot use import.meta outside a module". Strip the appended IIFE wrapper before passing the source to useRunner.
Defer theme-dependent icon rendering until after mount to prevent server/client mismatch when localStorage theme differs from default.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
variantprop: newoutlined|elevated|filledvariants for controlling card surface style.outlinedis the default (backward compatible withbordered={true}). Deprecated theborderedprop in favor ofvariant.childrenprop now accepts arrays ofReactElement, matching runtime behavior.ColumnType.dataIndexis now optional, supporting action columns that don't map to data fields.apps/pro/) with 20 block categories and 25 UI blocks showcasing@tiny-design/reactcomponents. Features live preview, responsive viewport toggle, source code view, and theme switching./tiny-design/pro/.Release
minor(new Card variant feature)@tiny-design/react(and fixed-version group:@tiny-design/tokens,@tiny-design/icons)Test plan
<Card variant="elevated">renders with box-shadow, no border<Card variant="filled">renders with fill background<Card variant="outlined">and<Card bordered>both render with border (backward compat)<Card bordered={false}>still works<NativeSelect>accepts multiple<NativeSelect.Option>children without type errors<Table>accepts columns withoutdataIndex(action columns)pnpm --filter @tiny-design/pro build— static export succeedspnpm --filter @tiny-design/pro dev— blocks render correctly🤖 Generated with Claude Code