fix(grid): [grid] add grid no-data icon #3257
Conversation
WalkthroughThe changes add new CSS custom properties and variables for “no data” states in dark theme and related grid styles. Background image settings for empty grid states have been removed. Additionally, a new icon, IconGridNoData, has been introduced and integrated into the Vue grid components, replacing the previous placeholder text for empty states. Changes
Sequence Diagram(s)sequenceDiagram
participant Grid as Grid Component
participant Renderer as Render Function
participant Icon as IconGridNoData (Vue Icon)
participant SVG as SVG Component
Grid->>Renderer: Check for empty data
Renderer->>Icon: Invoke iconGridNoData()
Icon->>SVG: Render SVG for no data
SVG-->>Icon: Return rendered icon
Icon-->>Renderer: Provide icon component
Renderer-->>Grid: Display no data icon in grid
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/vue-icon-saas/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue-icon/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/grid/src/body/src/body.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
wuyiping0628
added
enhancement
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/theme/src/base/vars.less (1)
337-341: New CSS Custom Properties for No-Data StatesFour new custom properties have been added for empty state (no-data) icon styling. They are defined as follows:
--tv-color-no-data-gary-1: var(--tv-base-color-common-4); // #f0f0f0--tv-color-no-data-gary-2: var(--tv-base-color-common-1); // #ffffff--tv-color-no-data-border: var(--tv-base-color-common-8); // #808080--tv-color-no-data-brand: var(--tv-base-color-brand-6); // #317af7Please verify that:
• The color values match the design specification for empty states.
• The use of “gary” in the variable names is intentional (or if it should be “gray” for clarity).packages/theme/src/base/dark-theme.less (1)
337-341: New Dark Theme CSS Properties for No-Data StatesIn the dark theme file, corresponding custom properties for empty state icons have been added with adjusted color values:
--tv-color-no-data-gary-1: var(--tv-base-color-common-10); // #262626--tv-color-no-data-gary-2: var(--tv-base-color-common-9); // #333333--tv-color-no-data-border: var(--tv-base-color-common-5); // #999999--tv-color-no-data-brand: var(--tv-base-color-brand-7); // #317AF7Again, please check that the chosen values match the intended design for dark mode and that the naming (“gary”) is consistent with your style guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/theme-saas/src/svgs/grid-no-data.svgis excluded by!**/*.svgpackages/theme/src/svgs/grid-no-data.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
packages/theme/src/base/dark-theme.less(1 hunks)packages/theme/src/base/vars.less(1 hunks)packages/theme/src/grid/table.less(0 hunks)packages/theme/src/grid/vars.less(0 hunks)packages/vue-icon-saas/index.ts(3 hunks)packages/vue-icon/index.ts(3 hunks)packages/vue-icon/src/grid-no-data/index.ts(1 hunks)packages/vue/src/grid/src/body/src/body.tsx(2 hunks)packages/vue/src/grid/src/table/src/table.ts(2 hunks)
💤 Files with no reviewable changes (2)
- packages/theme/src/grid/table.less
- packages/theme/src/grid/vars.less
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
- GitHub Check: Parse Affected Components
🔇 Additional comments (11)
packages/vue-icon/src/grid-no-data/index.ts (1)
1-4: Implementation looks goodThe new file correctly exports a Vue icon component for the grid's no-data state, following the established pattern in the codebase. The component is properly created using the
svgutility with the appropriate name and SVG component.packages/vue-icon/index.ts (3)
458-458: Correct import statementThe import for the new IconGridNoData is correctly added and follows the established pattern in the codebase.
1524-1525: Exports follow established patternBoth the standard export (IconGridNoData) and the alias export (iconGridNoData) are correctly added, maintaining consistency with other icons in the file.
2069-2069: Default export updated correctlyThe new icon is appropriately added to the default export object, ensuring it's available both as a named export and through the default export.
packages/vue/src/grid/src/table/src/table.ts (3)
46-46: Icon import added correctlyThe import statement for the grid-no-data icon is added properly using the camelCase alias.
54-54: Component initialization looks goodThe GridNoData constant is correctly initialized by invoking the imported icon function.
126-126: Enhanced empty state visualizationGood improvement replacing the paragraph element with the custom icon for empty states, which provides better visual feedback to users.
packages/vue/src/grid/src/body/src/body.tsx (3)
39-39: Icon import added correctlyThe import statement for the grid-no-data icon is properly added alongside existing icon imports.
43-43: Component initialization looks goodThe GridNoData constant is correctly initialized by invoking the imported icon function.
755-757: Enhanced empty state visualizationGood improvement replacing the paragraph element with the custom icon. This enhancement provides better visual feedback to users when the grid has no data to display, and maintains consistency with the changes in table.ts.
packages/vue-icon-saas/index.ts (1)
1523-1525: Addition of IconGridNoData IconThe new
IconGridNoDatais correctly imported from./src/grid-no-dataand included in both the named and default exports. This aligns with the PR’s objective to supply a dedicated icon for grid empty states. Please make sure that the corresponding source file implements the design and that any related documentation (or tests) is updated if needed.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit