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

fix(notify): [notify] fix notify's demos #2326

Merged
merged 1 commit into from
Oct 21, 2024
Merged

fix(notify): [notify] fix notify's demos #2326

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/notify/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function handleClick() {
function handleClickJxs() {
Notify({
type: 'info',
title: () => <h4>通知消息的标题</h4>,
title: () => <h4 style="margin:0">通知消息的标题</h4>,
message: () => (
<span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
),
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
handleClickJxs() {
Notify({
type: 'info',
title: () => <h4>通知消息的标题</h4>,
title: () => <h4 style="margin:0">通知消息的标题</h4>,
message: () => (
<span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
),
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
const handleClick = ref(
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
duration: 1000,
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/debounceDelay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
return {
handleClick: Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
duration: 1000,
Expand Down
14 changes: 2 additions & 12 deletions examples/sites/demos/pc/app/notify/duration-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div class="content">
<tiny-button @click="baseClick" :reset-time="0">默认4500 ms后自动关闭提示框</tiny-button>
<tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
</div>
Expand All @@ -9,19 +8,10 @@
<script setup lang="jsx">
import { Button as TinyButton, Notify } from '@opentiny/vue'

function baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '默认 4500ms 后自动关闭提示框',
position: 'top-right'
})
}

function successClick() {
Notify({
type: 'success',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Notification duration too short

The duration property is set to 500ms, which may be insufficient for users to read the notification message. Consider increasing it to a higher value (e.g., 1000ms) to enhance user experience.

  • examples/sites/demos/pc/app/notify/duration-composition-api.vue: duration: 500
🔗 Analysis chain

Simplified title improves readability.

The change from a JSX element to a simple string for the title property enhances code clarity and maintainability.

However, the 500ms duration might be too short for users to read the notification. Consider increasing it to ensure better user experience. Run the following script to check for other short durations:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for potentially short notification durations

rg 'duration:\s*(\d+)' --type vue | awk -F ':' '{if ($NF <= 1000) print $0}'

Length of output: 171

Script:

#!/bin/bash
# Description: Check for potentially short notification durations in .vue files

rg 'duration:\s*(\d+)' --type-add 'vue:*.vue' --type vue | awk -F ':' '{if ($NF <= 1000) print $0}'

Length of output: 1440

message: '500ms 后自动关闭提示框',
position: 'top-right',
duration: 500
Expand All @@ -31,7 +21,7 @@ function successClick() {
function errorClick() {
Notify({
type: 'error',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '5000ms 后自动关闭提示框',
position: 'top-right',
duration: 5000
Expand Down
4 changes: 0 additions & 4 deletions examples/sites/demos/pc/app/notify/duration.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import { test, expect } from '@playwright/test'
test('自动关闭延时', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#duration')
await page.getByRole('button', { name: '默认4500 ms后自动关闭提示框' }).click()
await page.waitForSelector('.tiny-notify')
await page.waitForTimeout(4500)
await page.waitForSelector('.tiny-notify', { state: 'hidden' })

await page.getByRole('button', { name: '500ms后自动关闭提示框' }).click()
await page.waitForSelector('.tiny-notify')
Expand Down
13 changes: 2 additions & 11 deletions examples/sites/demos/pc/app/notify/duration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div class="content">
<tiny-button @click="baseClick" :reset-time="0">默认4500 ms后自动关闭提示框</tiny-button>
<tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
</div>
Expand All @@ -14,18 +13,10 @@ export default {
TinyButton: Button
},
methods: {
baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '默认 4500ms 后自动关闭提示框',
position: 'top-right'
})
},
successClick() {
Notify({
type: 'success',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '500ms 后自动关闭提示框',
position: 'top-right',
duration: 500
Expand All @@ -34,7 +25,7 @@ export default {
errorClick() {
Notify({
type: 'error',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '5000ms 后自动关闭提示框',
position: 'top-right',
duration: 5000
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/showClose-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showClose: false,
position: 'top-right'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/showClose.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showClose: false,
position: 'top-right'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/showIcon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showIcon: false,
position: 'top-right'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/showIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

CSS Styles Adjustment Required

Inline styles are applied to <h4> elements within the notify components in the following files:

  • examples/sites/demos/pc/app/notify/basic-usage.vue
  • examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue

Please ensure that the notification title's appearance remains consistent by updating or relocating these styles accordingly.

🔗 Analysis chain

LGTM! Simplified title definition.

The change from a JSX element to a string for the title property simplifies the code and aligns with similar changes in other components. This improves consistency and readability.

Please verify that this change doesn't negatively impact the appearance of the notification title. If any specific styling was applied to the <h4> element previously, you may need to adjust the CSS accordingly.

To verify the appearance, you can run the following script:

If the script returns any results, you may need to adjust the styling to maintain the desired appearance with the new string-based title.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any CSS styles applied to h4 elements in notification titles

# Search for CSS rules targeting h4 elements in notify-related styles
rg -i '\.notify.*h4' --type css

# Search for any inline styles on h4 elements within notify components
rg '<h4.*style=' --type vue

Length of output: 91

Script:

#!/bin/bash
# Description: Check for any CSS styles applied to h4 elements in notification titles

# Search for CSS rules targeting h4 elements in notify-related styles
rg -i '\.notify.*h4' --type css

# Search for any inline styles on h4 elements within notify components
rg '<h4.*style='

Length of output: 278

message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showIcon: false,
position: 'top-right'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/type-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function infoClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
customClass: 'my-custom-cls'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/type.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default {
infoClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
customClass: 'my-custom-cls'
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function handleClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Inconsistent title property usage in Notify functions

The title property has been changed to a string in verticalOffset-composition-api.vue, but several other notify demo files still use a function returning a JSX element for title. Ensure that the title property is consistently defined as a string across all notify demos to maintain uniformity and readability.

🔗 Analysis chain

Simplified title property in Notify function

The change from a JSX element to a string for the title property simplifies the code and aligns with the PR objective to fix notify's demos. This modification enhances readability and maintainability.

However, consider the following points:

  1. Ensure that this change doesn't affect any custom styling that might have been applied to the <h4> element previously used.
  2. Verify that this modification is consistent across all notify demos for uniformity.
  3. If there were any accessibility benefits from using an <h4> tag, consider if alternative measures are needed to maintain accessibility.

To ensure consistency across notify demos, run the following script:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for consistent title property usage in notify demos

# Test: Search for title property in notify demos
rg -U --multiline 'Notify\({[^}]*title:.*?[^}]*\)' examples/sites/demos/pc/app/notify

Length of output: 209

Script:

#!/bin/bash
# Description: Check for consistent title property usage in notify demos

# Test: Search for title property in Notify function
rg -U --multiline 'Notify\(\{[^}]*title:\s*[^}]*\)' examples/sites/demos/pc/app/notify

Length of output: 4832

Script:

#!/bin/bash
# Description: Check for consistent title property usage in notify demos

# Test: Search for title property in Notify function
rg -U --multiline 'Notify\(\{[^}]*title:\s*[^}]*\}\)' examples/sites/demos/pc/app/notify

Length of output: 17199

message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
customClass: 'my-custom-cls',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/verticalOffset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
handleClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
customClass: 'my-custom-cls',
Expand Down
Loading