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(drawer): [drawer] modify smb theme #2150

Merged
merged 1 commit into from
Sep 20, 2024
Merged

feat(drawer): [drawer] modify smb theme #2150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
18 changes: 14 additions & 4 deletions examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
<template #footer>
<div class="my-footer">
<span>自定义底部文本</span>
<tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
<div class="foot-text">
<div>
<tiny-button type="text">文本按钮</tiny-button>
</div>
<div class="my-footer">
<tiny-button native-type="submit" @click="visible = false">取消</tiny-button>
<tiny-button type="primary" native-type="submit" @click="visible = false">确认</tiny-button>
</div>
</div>
</template>
</tiny-drawer>
Expand All @@ -30,4 +35,9 @@ function openDrawer() {
justify-content: space-between;
align-items: center;
}
.foot-text {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,5 @@ test('底部插槽', async ({ page }) => {

await page.waitForTimeout(300)
await expect(footer).toBeVisible()
await expect(footer.locator('> div')).toHaveClass('my-footer')
await expect(footer).toContainText('自定义底部文本')
await expect(footer.locator('> div')).toHaveClass('foot-text')
Copy link

Choose a reason for hiding this comment

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

Tip

Codebase Verification

Potential mismatch between test and implementation

The 'foot-text' class is only found in the test file (examples/sites/demos/pc/app/drawer/footer-slot.spec.ts) and not in any component, HTML, or CSS files. This suggests a possible discrepancy between the test expectations and the actual implementation.

  • Verify if the 'foot-text' class is implemented in the drawer component.
  • If the class is not implemented, either update the test to match the current implementation or modify the component to include the 'foot-text' class.
  • Ensure that the test accurately reflects the expected behavior of the drawer's footer.
Analysis chain

LGTM!

The change in the expected class name for the footer's child div aligns with the AI-generated summary, which suggests an update to the footer's design or structure. The removal of the text assertion also indicates that the specific text is no longer expected to be present in the footer.

Please ensure that the corresponding changes to the footer's design have been consistently applied across the relevant component files and documentation.

Run the following script to verify the usage of the 'foot-text' class in the codebase:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the 'foot-text' class in the codebase.

# Test: Search for the usage of the 'foot-text' class. Expect: Occurrences in relevant component files.
rg --type typescript $'\'foot-text\''

Length of output: 77

Script:

#!/bin/bash
# Description: Verify the usage of the 'foot-text' class in the codebase.

# Search for 'foot-text' in .ts and .tsx files
echo "Searching in TypeScript files:"
rg -g '*.{ts,tsx}' "'foot-text'"

# Search for 'foot-text' in .html files
echo "Searching in HTML files:"
rg -g '*.html' "'foot-text'"

# Search for 'foot-text' in .css files
echo "Searching in CSS files:"
rg -g '*.css' "'foot-text'"

# List all files containing 'foot-text'
echo "All files containing 'foot-text':"
rg -l "'foot-text'"

Length of output: 586

})
18 changes: 14 additions & 4 deletions examples/sites/demos/pc/app/drawer/footer-slot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>

<template #footer>
<div class="my-footer">
<span>自定义底部文本</span>
<tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
<div class="foot-text">
<div>
<tiny-button type="text">文本按钮</tiny-button>
</div>
<div class="my-footer">
<tiny-button native-type="submit" @click="visible = false">取消</tiny-button>
<tiny-button type="primary" native-type="submit" @click="visible = false">确认</tiny-button>
</div>
</div>
</template>
</tiny-drawer>
Expand Down Expand Up @@ -41,4 +46,9 @@ export default {
justify-content: space-between;
align-items: center;
}
.foot-text {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@update:visible="visible = $event"
@confirm="confirm"
>
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@update:visible="visible = $event"
@confirm="confirm"
>
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
5 changes: 3 additions & 2 deletions examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="demo-drawer">
<tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
<tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand All @@ -14,7 +14,8 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
const visible = ref(false)
const tipsProps = reactive({
content: '这是一段帮助提示。。。',
placement: 'right'
placement: 'right',
effect: 'light'
})

function openDrawer() {
Expand Down
5 changes: 3 additions & 2 deletions examples/sites/demos/pc/app/drawer/tips-props.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="demo-drawer">
<tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
<tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand All @@ -20,7 +20,8 @@ export default {
visible: false,
tipsProps: {
content: '这是一段帮助提示。。。',
placement: 'right'
placement: 'right',
effect: 'light'
}
}
},
Expand Down
Loading