feat(milestone): [milestone] Adapt milestone component smb theme #1996
Conversation
WalkthroughThe recent changes involve enhancements to Vue components related to milestones, including updates to status color mappings, the introduction of new styling classes, and the addition of utility functions for color conversion and flag styling. New theme files and CSS variables have been added to support consistent styling across components, and adjustments have been made to improve the structure and readability of the code, particularly in templates and test files. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
|
|
|
There was a problem hiding this comment.
Actionable comments posted: 14
Outside diff range, codebase verification and nitpick comments (1)
packages/theme/src/milestone/index.less (1)
53-59: Add a comment to explain the purpose of the.node-status-completedclass.Adding a comment will help other developers understand the purpose of this class.
Consider adding a comment like this:
+ /* This class styles the milestone node when it is completed */ &.node-status-completed { .@{milestone-prefix-cls}__line { background-color: var(--ti-milestone-line-bg-color-completed); } }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (14)
- examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue (3 hunks)
- examples/sites/demos/pc/app/milestone/basic-usage.spec.ts (4 hunks)
- examples/sites/demos/pc/app/milestone/basic-usage.vue (4 hunks)
- packages/design/smb/index.ts (2 hunks)
- packages/design/smb/src/milestone/index.ts (1 hunks)
- packages/renderless/src/milestone/index.ts (2 hunks)
- packages/renderless/src/milestone/vue.ts (3 hunks)
- packages/renderless/types/milestone.type.ts (2 hunks)
- packages/theme/src/milestone/aurora-theme.js (1 hunks)
- packages/theme/src/milestone/index.less (4 hunks)
- packages/theme/src/milestone/smb-theme.js (1 hunks)
- packages/theme/src/milestone/vars.less (2 hunks)
- packages/vue/src/milestone/src/index.ts (1 hunks)
- packages/vue/src/milestone/src/pc.vue (2 hunks)
Files skipped from review due to trivial changes (1)
- packages/theme/src/milestone/aurora-theme.js
Additional comments not posted (23)
packages/design/smb/index.ts (2)
17-17: LGTM!The import statement for
Milestoneis correctly added.The code changes are approved.
39-40: LGTM!The
Milestonecomponent is correctly added to thecomponentsobject in the default export.The code changes are approved.
packages/renderless/src/milestone/vue.ts (3)
19-27: LGTM!The import statements for
hexToRgbandgetFlagStyleare correctly added.The code changes are approved.
40-42: LGTM!The
hexToRgbandgetFlagStylefunctions are correctly added to theapiarray.The code changes are approved.
61-63: LGTM!The
hexToRgbandgetFlagStylefunctions are correctly added to therenderlessfunction.The code changes are approved.
examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue (3)
3-15: LGTM!The template section is correctly updated to demonstrate different usage scenarios for the
tiny-milestonecomponent.The code changes are approved.
28-30: LGTM!The
statusMapobject is correctly updated with new color values for the 'doing' and 'back' statuses.The code changes are approved.
86-87: LGTM!The
milestoneDataarray is correctly updated with the new status value for one of the milestones.The code changes are approved.
packages/theme/src/milestone/smb-theme.js (1)
1-35: LGTM!The theme properties are correctly implemented and follow consistent naming conventions.
The code changes are approved.
packages/renderless/types/milestone.type.ts (2)
38-40: LGTM!The interface
IMilestoneFlagStyleis correctly implemented.The code changes are approved.
71-72: LGTM!The methods
hexToRgbandgetFlagStyleare correctly implemented and enhance the functionality of theIMilestoneApiinterface.The code changes are approved.
examples/sites/demos/pc/app/milestone/basic-usage.vue (2)
3-15: LGTM!The new sections in the template are correctly added and labeled in Chinese, providing context for users.
The code changes are approved.
31-35: LGTM!The updates to the
statusMapobject andflagsarray are correctly implemented.The code changes are approved.
Also applies to: 90-90
packages/theme/src/milestone/vars.less (1)
Line range hint
22-92: LGTM!The new CSS variable declarations enhance the styling capabilities for milestone icons and flags.
The code changes are approved.
packages/renderless/src/milestone/index.ts (2)
23-23: LGTM!The function
hexToRgbis correctly implemented and making it public enhances its reusability.The code changes are approved.
119-125: LGTM!The function
getFlagStyleis correctly implemented and enhances the modularity of the code.The code changes are approved.
examples/sites/demos/pc/app/milestone/basic-usage.spec.ts (4)
7-7: LGTM!The update to the
milestonelocator ensures that the test interacts with the correct instance of the milestone component.The code changes are approved.
37-39: LGTM!The updates to the
iconStylesarray reflect a shift in the visual design and ensure consistency across the visual representation.The code changes are approved.
Also applies to: 47-49
59-59: LGTM!The updates to the
flagLineColorsarray ensure consistency across the visual representation.The code changes are approved.
92-92: LGTM!The update to the padding of the
flagsuses a shorthand notation and may affect the layout of the flags in the UI.The code changes are approved.
packages/vue/src/milestone/src/pc.vue (3)
46-46: LGTM!The refactoring of inline styles to use the
getFlagStylemethod enhances readability and maintainability of the code.The code changes are approved.
64-64: LGTM!The addition of the
tiny-milestone__flag-nameclass improves the semantic structure of the HTML and potentially enhances styling capabilities.The code changes are approved.
65-65: LGTM!The addition of the
tiny-milestone__flag-descclass improves the semantic structure of the HTML and potentially enhances styling capabilities.The code changes are approved.
| STATUS_MAP: { | ||
| COMPLETED: 'completed', | ||
| DOING: 'doing', | ||
| BACK: 'back', | ||
| END: 'end', | ||
| CANEL: 'canel' |
There was a problem hiding this comment.
Fix the misspelled status identifier.
The status identifier CANEL is misspelled. It should be CANCEL.
Apply this diff to fix the misspelling:
STATUS_MAP: {
COMPLETED: 'completed',
DOING: 'doing',
BACK: 'back',
END: 'end',
- CANEL: 'canel'
+ CANCEL: 'cancel'
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| STATUS_MAP: { | |
| COMPLETED: 'completed', | |
| DOING: 'doing', | |
| BACK: 'back', | |
| END: 'end', | |
| CANEL: 'canel' | |
| STATUS_MAP: { | |
| COMPLETED: 'completed', | |
| DOING: 'doing', | |
| BACK: 'back', | |
| END: 'end', | |
| CANCEL: 'cancel' |
| renderless: (props, hooks, { emit, constants }, api) => { | ||
| const state = api.state | ||
| const smbConstants = { | ||
| STATUS_COLOR_MAP: { | ||
| DEFAULT: { | ||
| BORDER_COLOR: '#C2C2C2', | ||
| BACKGROUND_COLOR: '#FFFFFF', | ||
| COLOR: '#191919', | ||
| BOX_SHADOW_PX: '0px 0px 0px 4px', | ||
| FLAG_CONTENT_CLS: '.content' | ||
| }, | ||
| COMPLETED: { | ||
| BORDER_COLOR: '#191919', | ||
| BACKGROUND_COLOR: '#FFFFFF', | ||
| COLOR: '#191919', | ||
| BOX_SHADOW_PX: '0px 0px 0px 4px', | ||
| FLAG_CONTENT_CLS: '.content' | ||
| }, | ||
| DOING: { | ||
| BORDER_COLOR: '#191919', | ||
| BACKGROUND_COLOR: '#191919', | ||
| COLOR: '#FFFFFF', | ||
| BOX_SHADOW_PX: '0px 0px 0px 4px', | ||
| FLAG_CONTENT_CLS: '.content' | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| getMileIcon: (node) => { | ||
| const status = node[props.statusField] | ||
| // 状态色 | ||
| const statusColor = props.milestonesStatus[status] | ||
|
|
||
| if (props.solid || status === constants.STATUS_MAP.DOING) { | ||
| return { | ||
| 'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important', | ||
| color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important', | ||
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR, | ||
| boxShadow: 'unset' | ||
| } | ||
| } | ||
|
|
||
| if (status === constants.STATUS_MAP.COMPLETED) { | ||
| return { | ||
| 'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important', | ||
| color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important', | ||
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR, | ||
| boxShadow: 'unset' | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important', | ||
| color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important', | ||
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR, | ||
| boxShadow: 'unset' | ||
| } | ||
| }, | ||
| getFlagStyle: ({ index, idx }) => { | ||
| return { | ||
| left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)` | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Refactor suggestion: Improve efficiency and readability.
- Move the
smbConstantsobject outside the renderless function to avoid re-creation on each render. - Simplify the
getMileIconmethod by using a switch-case statement.
Apply this diff to implement the suggestions:
-export default {
- renderless: (props, hooks, { emit, constants }, api) => {
- const state = api.state
- const smbConstants = {
+const smbConstants = {
STATUS_COLOR_MAP: {
DEFAULT: {
BORDER_COLOR: '#C2C2C2',
BACKGROUND_COLOR: '#FFFFFF',
COLOR: '#191919',
BOX_SHADOW_PX: '0px 0px 0px 4px',
FLAG_CONTENT_CLS: '.content'
},
COMPLETED: {
BORDER_COLOR: '#191919',
BACKGROUND_COLOR: '#FFFFFF',
COLOR: '#191919',
BOX_SHADOW_PX: '0px 0px 0px 4px',
FLAG_CONTENT_CLS: '.content'
},
DOING: {
BORDER_COLOR: '#191919',
BACKGROUND_COLOR: '#191919',
COLOR: '#FFFFFF',
BOX_SHADOW_PX: '0px 0px 0px 4px',
FLAG_CONTENT_CLS: '.content'
}
}
}
- return {
- getMileIcon: (node) => {
- const status = node[props.statusField]
- const statusColor = props.milestonesStatus[status]
-
- if (props.solid || status === constants.STATUS_MAP.DOING) {
- return {
- 'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important',
- color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important',
- 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR,
- boxShadow: 'unset'
- }
- }
-
- if (status === constants.STATUS_MAP.COMPLETED) {
- return {
- 'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important',
- color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important',
- 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR,
- boxShadow: 'unset'
- }
- }
-
- return {
- background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important',
- color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important',
- 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR,
- boxShadow: 'unset'
- }
- },
- getFlagStyle: ({ index, idx }) => {
- return {
- left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)`
- }
- }
- }
- }
+export default {
+ renderless: (props, hooks, { emit, constants }, api) => {
+ const state = api.state
+
+ return {
+ getMileIcon: (node) => {
+ const status = node[props.statusField]
+ const statusColor = props.milestonesStatus[status]
+ switch (status) {
+ case constants.STATUS_MAP.DOING:
+ return {
+ 'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important',
+ color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important',
+ 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR,
+ boxShadow: 'unset'
+ }
+ case constants.STATUS_MAP.COMPLETED:
+ return {
+ 'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important',
+ color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important',
+ 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR,
+ boxShadow: 'unset'
+ }
+ default:
+ return {
+ background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important',
+ color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important',
+ 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR,
+ boxShadow: 'unset'
+ }
+ }
+ },
+ getFlagStyle: ({ index, idx }) => {
+ return {
+ left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)`
+ }
+ }
+ }
+ }
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| renderless: (props, hooks, { emit, constants }, api) => { | |
| const state = api.state | |
| const smbConstants = { | |
| STATUS_COLOR_MAP: { | |
| DEFAULT: { | |
| BORDER_COLOR: '#C2C2C2', | |
| BACKGROUND_COLOR: '#FFFFFF', | |
| COLOR: '#191919', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| }, | |
| COMPLETED: { | |
| BORDER_COLOR: '#191919', | |
| BACKGROUND_COLOR: '#FFFFFF', | |
| COLOR: '#191919', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| }, | |
| DOING: { | |
| BORDER_COLOR: '#191919', | |
| BACKGROUND_COLOR: '#191919', | |
| COLOR: '#FFFFFF', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| } | |
| } | |
| } | |
| return { | |
| getMileIcon: (node) => { | |
| const status = node[props.statusField] | |
| // 状态色 | |
| const statusColor = props.milestonesStatus[status] | |
| if (props.solid || status === constants.STATUS_MAP.DOING) { | |
| return { | |
| 'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important', | |
| color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| } | |
| if (status === constants.STATUS_MAP.COMPLETED) { | |
| return { | |
| 'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important', | |
| color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| } | |
| return { | |
| background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important', | |
| color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| }, | |
| getFlagStyle: ({ index, idx }) => { | |
| return { | |
| left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)` | |
| } | |
| } | |
| } | |
| } | |
| } | |
| const smbConstants = { | |
| STATUS_COLOR_MAP: { | |
| DEFAULT: { | |
| BORDER_COLOR: '#C2C2C2', | |
| BACKGROUND_COLOR: '#FFFFFF', | |
| COLOR: '#191919', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| }, | |
| COMPLETED: { | |
| BORDER_COLOR: '#191919', | |
| BACKGROUND_COLOR: '#FFFFFF', | |
| COLOR: '#191919', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| }, | |
| DOING: { | |
| BORDER_COLOR: '#191919', | |
| BACKGROUND_COLOR: '#191919', | |
| COLOR: '#FFFFFF', | |
| BOX_SHADOW_PX: '0px 0px 0px 4px', | |
| FLAG_CONTENT_CLS: '.content' | |
| } | |
| } | |
| } | |
| export default { | |
| renderless: (props, hooks, { emit, constants }, api) => { | |
| const state = api.state | |
| return { | |
| getMileIcon: (node) => { | |
| const status = node[props.statusField] | |
| const statusColor = props.milestonesStatus[status] | |
| switch (status) { | |
| case constants.STATUS_MAP.DOING: | |
| return { | |
| 'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important', | |
| color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| case constants.STATUS_MAP.COMPLETED: | |
| return { | |
| 'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important', | |
| color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| default: | |
| return { | |
| background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important', | |
| color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important', | |
| 'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR, | |
| boxShadow: 'unset' | |
| } | |
| } | |
| }, | |
| getFlagStyle: ({ index, idx }) => { | |
| return { | |
| left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)` | |
| } | |
| } | |
| } | |
| } | |
| } |
| left: var(--ti-milestone-icon-left); | ||
| top: var(--ti-milestone-icon-top); |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variables --ti-milestone-icon-left and --ti-milestone-icon-top should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
left: var(--ti-milestone-icon-left, 0);
top: var(--ti-milestone-icon-top, 0);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| left: var(--ti-milestone-icon-left); | |
| top: var(--ti-milestone-icon-top); | |
| left: var(--ti-milestone-icon-left, 0); | |
| top: var(--ti-milestone-icon-top, 0); |
| } | ||
|
|
||
| & &__dot { | ||
| display: block; | ||
| display: var(--ti-milestone-dot-display); |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variable --ti-milestone-dot-display should have a fallback value to ensure proper rendering if the variable is not defined.
Apply this diff to add a fallback value:
display: var(--ti-milestone-dot-display, block);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| display: var(--ti-milestone-dot-display); | |
| display: var(--ti-milestone-dot-display, block); |
| margin-left: var(--ti-milestone-flag-line-margin-left); | ||
| background: var(--ti-milestone-flag-line-bg-color); |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variable --ti-milestone-flag-line-margin-left and --ti-milestone-flag-line-bg-color should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
margin-left: var(--ti-milestone-flag-line-margin-left, 0);
background: var(--ti-milestone-flag-line-bg-color, #ccc);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| margin-left: var(--ti-milestone-flag-line-margin-left); | |
| background: var(--ti-milestone-flag-line-bg-color); | |
| margin-left: var(--ti-milestone-flag-line-margin-left, 0); | |
| background: var(--ti-milestone-flag-line-bg-color, #ccc); |
| width: var(--ti-milestone-flag-width); | ||
| font-size: var(--ti-milestone-flag-font-size); | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| padding: 0 4px; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variables --ti-milestone-flag-width and --ti-milestone-flag-font-size should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
width: var(--ti-milestone-flag-width, 58px);
font-size: var(--ti-milestone-flag-font-size, 12px);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| width: var(--ti-milestone-flag-width); | |
| font-size: var(--ti-milestone-flag-font-size); | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| padding: 0 4px; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| width: var(--ti-milestone-flag-width, 58px); | |
| font-size: var(--ti-milestone-flag-font-size, 12px); | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } |
| height: var(--ti-milestone-line-height); | ||
| width: var(--ti-milestone-line-width); | ||
| left: var(--ti-milestone-line-left); | ||
| top: var(--ti-milestone-line-top); | ||
|
|
||
| position: relative; // 里程碑线条不区分状态 | ||
| background: var(--ti-milestone-line-bg-color); | ||
| background-color: var(--ti-milestone-line-bg-color); |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variables --ti-milestone-line-height, --ti-milestone-line-width, --ti-milestone-line-left, --ti-milestone-line-top, and --ti-milestone-line-bg-color should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
height: var(--ti-milestone-line-height, 2px);
width: var(--ti-milestone-line-width, 100%);
left: var(--ti-milestone-line-left, 0);
top: var(--ti-milestone-line-top, 0);
background-color: var(--ti-milestone-line-bg-color, #ccc);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| height: var(--ti-milestone-line-height); | |
| width: var(--ti-milestone-line-width); | |
| left: var(--ti-milestone-line-left); | |
| top: var(--ti-milestone-line-top); | |
| position: relative; // 里程碑线条不区分状态 | |
| background: var(--ti-milestone-line-bg-color); | |
| background-color: var(--ti-milestone-line-bg-color); | |
| height: var(--ti-milestone-line-height, 2px); | |
| width: var(--ti-milestone-line-width, 100%); | |
| left: var(--ti-milestone-line-left, 0); | |
| top: var(--ti-milestone-line-top, 0); | |
| position: relative; // 里程碑线条不区分状态 | |
| background-color: var(--ti-milestone-line-bg-color, #ccc); |
| color: var(--ti-milestone-flag-desc-text-color); | ||
| font-size: var(--ti-milestone-flag-desc-font-size); | ||
| line-height: var(--ti-milestone-flag-desc-line-height); | ||
| } |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variables --ti-milestone-flag-desc-text-color, --ti-milestone-flag-desc-font-size, and --ti-milestone-flag-desc-line-height should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
color: var(--ti-milestone-flag-desc-text-color, #666);
font-size: var(--ti-milestone-flag-desc-font-size, 12px);
line-height: var(--ti-milestone-flag-desc-line-height, 1.5);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| color: var(--ti-milestone-flag-desc-text-color); | |
| font-size: var(--ti-milestone-flag-desc-font-size); | |
| line-height: var(--ti-milestone-flag-desc-line-height); | |
| } | |
| color: var(--ti-milestone-flag-desc-text-color, #666); | |
| font-size: var(--ti-milestone-flag-desc-font-size, 12px); | |
| line-height: var(--ti-milestone-flag-desc-line-height, 1.5); |
| border: var(--ti-milestone-icon-border-width) solid; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variable --ti-milestone-icon-border-width should have a fallback value to ensure proper rendering if the variable is not defined.
Apply this diff to add a fallback value:
border: var(--ti-milestone-icon-border-width, 2px) solid;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| border: var(--ti-milestone-icon-border-width) solid; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: var(--ti-milestone-icon-border-width, 2px) solid; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; |
| width: var(--ti-milestone-flag-width); | ||
| height: var(--ti-milestone-flag-height); | ||
| padding: var(--ti-milestone-flag-padding); | ||
| line-height: var(--ti-milestone-flag-line-height); | ||
| font-size: var(--ti-milestone-flag-content-font-size); | ||
| border-radius: var(--ti-milestone-flag-content-border-radius); | ||
| color: var(--ti-milestone-text-color); | ||
| background: #333; | ||
| background-color: var(--ti-milestone-flag-content-bg-color); |
There was a problem hiding this comment.
Ensure CSS variables have fallback values.
The CSS variables --ti-milestone-flag-width, --ti-milestone-flag-height, --ti-milestone-flag-padding, --ti-milestone-flag-line-height, --ti-milestone-flag-content-font-size, --ti-milestone-flag-content-border-radius, and --ti-milestone-flag-content-bg-color should have fallback values to ensure proper rendering if the variables are not defined.
Apply this diff to add fallback values:
width: var(--ti-milestone-flag-width, 58px);
height: var(--ti-milestone-flag-height, 20px);
padding: var(--ti-milestone-flag-padding, 4px);
line-height: var(--ti-milestone-flag-line-height, 1.5);
font-size: var(--ti-milestone-flag-content-font-size, 12px);
border-radius: var(--ti-milestone-flag-content-border-radius, 4px);
background-color: var(--ti-milestone-flag-content-bg-color, #fff);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| width: var(--ti-milestone-flag-width); | |
| height: var(--ti-milestone-flag-height); | |
| padding: var(--ti-milestone-flag-padding); | |
| line-height: var(--ti-milestone-flag-line-height); | |
| font-size: var(--ti-milestone-flag-content-font-size); | |
| border-radius: var(--ti-milestone-flag-content-border-radius); | |
| color: var(--ti-milestone-text-color); | |
| background: #333; | |
| background-color: var(--ti-milestone-flag-content-bg-color); | |
| width: var(--ti-milestone-flag-width, 58px); | |
| height: var(--ti-milestone-flag-height, 20px); | |
| padding: var(--ti-milestone-flag-padding, 4px); | |
| line-height: var(--ti-milestone-flag-line-height, 1.5); | |
| font-size: var(--ti-milestone-flag-content-font-size, 12px); | |
| border-radius: var(--ti-milestone-flag-content-border-radius, 4px); | |
| color: var(--ti-milestone-text-color); | |
| background-color: var(--ti-milestone-flag-content-bg-color, #fff); |
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
New Features
Bug Fixes
Documentation
Chores