Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(guide): [guide] replace x with close-icon #2121

Merged
merged 3 commits into from
Sep 13, 2024
Merged

feat(guide): [guide] replace x with close-icon #2121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb8995e
feat(guide): [guide] replace x with icon
wuyiping0628 Sep 13, 2024
fa6a282
feat(guide): [guide] replace x with close-icon
wuyiping0628 Sep 13, 2024
65fca1a
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/guide-ico…
wuyiping0628 Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions packages/renderless/src/guide/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,23 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
const currentStep = Shepherd.activeTour && Shepherd.activeTour.getCurrentStep()
const currentStepElement = currentStep && currentStep.getElement()
const footer = currentStepElement && currentStepElement.querySelector('.shepherd-footer')
const cancelIcon =
currentStepElement && currentStepElement.querySelector('.shepherd-header .shepherd-cancel-icon span')
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use an optional chain for the cancelIcon element selection.

To prevent potential errors if the cancelIcon element is not found, consider using an optional chain for the element selection.

Apply this diff to use an optional chain:

-const cancelIcon =
-  currentStepElement && currentStepElement.querySelector('.shepherd-header .shepherd-cancel-icon span')
+const cancelIcon = currentStepElement?.querySelector('.shepherd-header .shepherd-cancel-icon span')
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.

Suggested change
currentStepElement && currentStepElement.querySelector('.shepherd-header .shepherd-cancel-icon span')
const cancelIcon = currentStepElement?.querySelector('.shepherd-header .shepherd-cancel-icon span')
Tools
Biome

[error] 136-136: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

const cloesIcon = `<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<polygon id="Fill-1" class="st0" points="0,16 16,16 16,0 0,0 "/>
<path id="形状结合" class="st1" d="M4.25,3.4L8,7.15l3.75-3.75c0.23-0.23,0.61-0.23,0.85,0c0.23,0.23,0.23,0.62,0,0.85L8.85,8
l3.75,3.75c0.23,0.24,0.23,0.62,0,0.85c-0.23,0.23-0.61,0.23-0.85,0L8,8.85L4.25,12.6c-0.23,0.23-0.61,0.23-0.85,0
c-0.24-0.23-0.24-0.61,0-0.85L7.15,8L3.4,4.25c-0.23-0.23-0.23-0.61,0-0.85C3.64,3.17,4.02,3.17,4.25,3.4z"/>
</svg>`

cancelIcon.innerHTML = cloesIcon
const progress = document.createElement('span')
progress.classList.add('progress-style')
progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${
Expand Down
6 changes: 4 additions & 2 deletions packages/theme/src/guide/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
@guide-prefix-cls: ~'@{css-prefix}guide';
.@{guide-prefix-cls} {
.component-css-vars-guide();

.shepherd-arrow {
height: calc(var(--ti-guide-arrow-height) * 1.4);
position: absolute;
width: calc(var(--ti-guide-arrow-width) * 1.4);
z-index: -10;
overflow: hidden;

&:before {
width: var(--ti-guide-arrow-width);
position: absolute;
Expand Down Expand Up @@ -67,7 +69,7 @@
width: var(--ti-guide-cancel-icon-width);
height: var(--ti-guide-cancel-icon-height);
line-height: var(--ti-guide-cancel-icon-line-height);
color: var(--ti-guide-cancel-icon-color);
fill: var(--ti-guide-cancel-icon-color);
display: inline-flex;
justify-content: center;
font-weight: var(--ti-guide-cancel-icon-font-weight);
Expand All @@ -77,7 +79,7 @@
}

span:hover {
color: var(--ti-guide-cancel-hover-icon-color);
fill: var(--ti-guide-cancel-hover-icon-color);
}
}
}
Expand Down
14 changes: 7 additions & 7 deletions packages/theme/src/guide/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,25 @@
// 引导框标题字号
--ti-guide-title-text-font-size: var(--ti-common-font-size-2);
// 引导框关闭按钮图标字号
--ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5, 24px);
--ti-guide-cancel-icon-font-size: var(--ti-common-font-size-4, 16px);
// 引导框关闭按钮图标宽度
--ti-guide-cancel-icon-width: var(--ti-common-size-5x, 20px);
--ti-guide-cancel-icon-width: var(--ti-common-size-4x, 16px);
// 引导框关闭按钮图标高度
--ti-guide-cancel-icon-height: var(--ti-common-size-5x, 20px);
--ti-guide-cancel-icon-height: var(--ti-common-size-4x, 16px);
// 引导框关闭按钮图标行高
--ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4, 20px);
// 引导框关闭按钮图标颜色
--ti-guide-cancel-icon-color: var(--ti-common-color-icon-normal, #575d6c);
// 引导框关闭按钮图标字重
--ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1, 100);
// 引导框关闭按钮图标顶部外边距
--ti-guide-cancel-icon-margin-top: calc(var(--ti-common-space-base) * (-6));
--ti-guide-cancel-icon-margin-top: calc(var(--ti-common-space-base) * (-3));
// 引导框关闭按钮图标顶部外边距
--ti-guide-cancel-icon-margin-right: calc(var(--ti-common-space-base) * (-2));
--ti-guide-cancel-icon-margin-right: calc(var(--ti-common-space-base) * (-1));
// 引导框关闭按钮图标顶部外边距
--ti-guide-progress-style-left: var(--ti-common-space-6x);
// 引导框关闭按钮图标悬浮色
--ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
--ti-guide-cancel-hover-icon-color: #191919;
// 引导框内容文本色
--ti-guide-text-text-color: #595959;
// 引导框内容行高
Expand Down Expand Up @@ -122,7 +122,7 @@
// 引导框按钮高度
--ti-guide-button-height: var(--ti-common-line-height-2);
// 引导框边框圆角
--ti-guide-shepherd-element-border-radius: var(--ti-common-border-radius-1, 4px);
--ti-guide-shepherd-element-border-radius: 8px;
// 分页提示文字颜色
--ti-guide-progresss-text-color: #808080;
}
Loading