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

refactor(theme): [button-group] refactor button-group theme vars #2276

Merged
merged 1 commit into from
Oct 16, 2024
Merged

refactor(theme): [button-group] refactor button-group theme vars #2276

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
34 changes: 0 additions & 34 deletions examples/sites/demos/apis/button-group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,6 @@ export default {
name: 'button-group',
type: 'component',
props: [
{
name: 'border',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示边框线',
'en-US': 'Remove button border.'
},
mode: ['pc'],
pcDemo: 'border'
},
{
name: 'data',
typeAnchorName: 'IButtonGroupData',
Expand Down Expand Up @@ -64,18 +53,6 @@ export default {
pcDemo: 'plain',
mfDemo: ''
},
{
name: 'show-edit',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示编辑按钮，只有在显示更多的情况下生效',
'en-US':
'Whether to display the edit button. This parameter takes effect only when more buttons are displayed'
},
mode: ['pc'],
pcDemo: 'show-edit'
},
{
name: 'show-more',
type: 'number',
Expand Down Expand Up @@ -146,17 +123,6 @@ export default {
},
mode: ['pc'],
pcDemo: 'change-event'
},
{
name: 'edit',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '当编辑按钮被点击时触发',
'en-US': 'Set the callback function triggered when the edit button is clicked'
},
mode: ['pc'],
pcDemo: 'show-edit'
}
],
methods: [],
Expand Down
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/button-group/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ test('按钮组基本示例', async ({ page }) => {
await button3.click()
await demo.getByRole('button', { name: 'Button2' }).hover()
await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
await expect(button3).toHaveCSS('background-color', 'rgb(20, 118, 255)')
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 Color Value Usage Detected

The background color for Button3 has been updated to rgb(20, 118, 255) in examples/sites/demos/pc/app/button-group/basic-usage.spec.ts. However, the old color value rgb(94, 124, 224) is still present in multiple locations across the codebase, which may lead to inconsistencies in the UI.

Affected Files with Old Color (rgb(94, 124, 224)):

  • examples/sites/demos/pc/app/wizard/base-usage.spec.ts
  • examples/sites/demos/pc/app/wizard/vertical.spec.ts
  • examples/sites/demos/pc/app/time-line/status.spec.ts
  • examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
  • examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js
  • examples/sites/demos/pc/app/base-select/automatic-dropdown.spec.ts
  • examples/sites/demos/pc/app/link/link-style.spec.ts
  • examples/sites/demos/pc/app/checkbox/checkbox-slot.spec.ts
  • examples/sites/demos/pc/app/cascader-panel/basic-usage.spec.ts
  • examples/sites/demos/pc/app/bulletin-board/base.spec.ts
  • examples/sites/demos/pc/app/bulletin-board/active-name.spec.ts
  • packages/theme/src/theme/devui-theme-map.js

Affected Files with New Color (rgb(20, 118, 255)):

  • examples/sites/demos/pc/app/switch/basic-usage.spec.ts
  • examples/sites/demos/pc/app/radio/basic-usage.spec.ts
  • examples/sites/demos/pc/app/checkbox/checkbox-button.spec.ts
  • examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts
  • examples/sites/demos/pc/app/button-group/disabled.spec.ts
  • examples/sites/demos/pc/app/button-group/basic-usage.spec.ts
  • examples/sites/demos/pc/app/button/ghost.spec.ts
  • examples/sites/demos/pc/app/button/text.spec.ts
  • examples/sites/demos/pc/app/badge/type.spec.ts
  • examples/sites/demos/mobile/app/alert/basic-usage.spec.ts

Please verify whether the remaining instances of the old color should also be updated to ensure a consistent theme throughout the project.

🔗 Analysis chain

Verify the updated background color value.

The expected background color for Button3 has been changed from rgb(94, 124, 224) to rgb(20, 118, 255). This change likely reflects an update in the component's design or theme.

To ensure this change is consistent across the codebase, please run the following script:

This will help identify if the color change has been consistently applied across the project.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other occurrences of the old and new color values

echo "Searching for old color value (94, 124, 224):"
rg --type css --type less --type scss --type js --type ts "94,\s*124,\s*224" || echo "No occurrences found."

echo -e "\nSearching for new color value (20, 118, 255):"
rg --type css --type less --type scss --type js --type ts "20,\s*118,\s*255" || echo "No occurrences found."

Length of output: 2916

Script:

#!/bin/bash
# Description: Corrected script to check for other occurrences of the old and new color values

echo "Searching for old color value (94, 124, 224):"
rg --type css --type less --type js --type ts "94,\s*124,\s*224" || echo "No occurrences found."

echo -e "\nSearching for new color value (20, 118, 255):"
rg --type css --type less --type js --type ts "20,\s*118,\s*255" || echo "No occurrences found."

Length of output: 4845

await expect(button3).toHaveCSS('color', 'rgb(255, 255, 255)')
await demo.getByRole('button', { name: 'Button2' }).click()
await expect(buttonGroup.locator('li').nth(1)).toHaveClass('active')
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ test('测试按钮是否换行', async ({ page }) => {
const demo = page.locator('#button-group-multiple')
const buttonGroup = demo.locator('.tiny-button-group')
const button = buttonGroup.locator('button').first()
const bottomSpace = 4
const bottomSpace = 2
let groupBox = await buttonGroup.boundingBox()
let buttonBox = await button.boundingBox()
expect(groupBox?.height).toBe(((buttonBox?.height || 0) + bottomSpace) * 2)
Expand Down
3 changes: 0 additions & 3 deletions examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
<div>
<tiny-button-group :data="groupData" disabled v-model="value"></tiny-button-group>
</div>
<div class="mt-12">
<tiny-button-group :data="groupData" :border="false" v-model="value" disabled></tiny-button-group>
</div>
<div class="mt-12">
<tiny-button-group :data="disabledGroup" v-model="value"></tiny-button-group>
</div>
Expand Down
31 changes: 8 additions & 23 deletions examples/sites/demos/pc/app/button-group/disabled.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,23 @@ test('测试按钮是否禁用', async ({ page }) => {

const demo = page.locator('#disabled')
const buttonGroup1 = demo.locator('.tiny-button-group').first()
const buttonGroup2 = demo.locator('.tiny-button-group').nth(1)
const buttonGroup3 = demo.locator('.tiny-button-group').nth(2)
const buttonGroup3 = demo.locator('.tiny-button-group').nth(1)

// 普通按钮组禁用
await expect(buttonGroup1.locator('button').first()).toHaveClass(/disabled/)
await expect(buttonGroup1.locator('button').first()).toHaveCSS('background-color', 'rgb(223, 225, 230)')
await expect(buttonGroup1.locator('button').first()).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
await expect(buttonGroup1.locator('button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(buttonGroup1.locator('button').first()).toHaveCSS('background-color', 'rgb(219, 219, 219)')
await expect(buttonGroup1.locator('button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
await expect(buttonGroup1.locator('button').nth(1)).toHaveClass(/disabled/)
await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)')
await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)')

// 无边框按钮组禁用
await expect(buttonGroup2.locator('button').first()).toHaveClass(/disabled/)
await expect(buttonGroup2.locator('button').first()).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(buttonGroup2.locator('button').first()).toHaveCSS('border-bottom-color', 'rgba(0, 0, 0, 0)')
await expect(buttonGroup2.locator('button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(buttonGroup2.locator('button').nth(1)).toHaveClass(/disabled/)
await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgba(0, 0, 0, 0)')
await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('color', 'rgb(194, 194, 194)')

// 单个按钮禁用
await expect(buttonGroup3.locator('button').first()).not.toHaveClass(/disabled/)
await expect(buttonGroup3.locator('button').first()).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(buttonGroup3.locator('button').first()).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
await expect(buttonGroup3.locator('button').first()).toHaveCSS('background-color', 'rgb(20, 118, 255)')
await expect(buttonGroup3.locator('button').first()).toHaveCSS('color', 'rgb(255, 255, 255)')
await expect(buttonGroup3.locator('button').nth(1)).toHaveClass(/disabled/)
await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)')
await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(194, 194, 194)')

// 按钮悬浮提示
await buttonGroup3.locator('button').nth(1).hover()
Expand Down
3 changes: 0 additions & 3 deletions examples/sites/demos/pc/app/button-group/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
<div>
<tiny-button-group :data="groupData" disabled v-model="value"></tiny-button-group>
</div>
<div class="mt-12">
<tiny-button-group :data="groupData" :border="false" v-model="value" disabled></tiny-button-group>
</div>
<div class="mt-12">
<tiny-button-group :data="disabledGroup" v-model="value"></tiny-button-group>
</div>
Expand Down
29 changes: 0 additions & 29 deletions examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue
View file
Open in desktop

This file was deleted.

32 changes: 0 additions & 32 deletions examples/sites/demos/pc/app/button-group/show-edit.spec.ts
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions examples/sites/demos/pc/app/button-group/show-edit.vue
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/button-group/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="button-group-demo">
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
</div>
Expand Down
10 changes: 6 additions & 4 deletions examples/sites/demos/pc/app/button-group/size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ test('测试按钮尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('button-group#size')

const mediumHeight = '42px'
const smallHeight = '32px'
const mediumHeight = '40px'
const defaultHeight = '32px'
const smallHeight = '28px'
const miniHeight = '24px'
const demo = page.locator('#size')
const buttonGroup = demo.locator('.tiny-button-group').first()
Expand All @@ -17,6 +18,7 @@ test('测试按钮尺寸', async ({ page }) => {
await expect(buttonGroup.locator('li').nth(0)).toHaveClass('active')

await expect(demo.getByRole('button', { name: 'Button1' }).first()).toHaveCSS('height', mediumHeight)
await expect(demo.getByRole('button', { name: 'Button1' }).nth(1)).toHaveCSS('height', smallHeight)
await expect(demo.getByRole('button', { name: 'Button1' }).nth(2)).toHaveCSS('height', miniHeight)
await expect(demo.getByRole('button', { name: 'Button1' }).nth(1)).toHaveCSS('height', defaultHeight)
await expect(demo.getByRole('button', { name: 'Button1' }).nth(2)).toHaveCSS('height', smallHeight)
await expect(demo.getByRole('button', { name: 'Button1' }).nth(3)).toHaveCSS('height', miniHeight)
})
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/button-group/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="button-group-demo">
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
</div>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/button-group/slot-default.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ test('测试按钮默认插槽', async ({ page }) => {
await page.goto('button-group#slot-default')
const demo = page.locator('#slot-default')
const buttonGroup = demo.locator('.tiny-button-group').first()
await expect(buttonGroup.getByRole('button', { name: 'Button1' })).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(buttonGroup.getByRole('button', { name: 'Button2' })).toHaveCSS('background-color', 'rgb(80, 212, 171)')
await expect(buttonGroup.getByRole('button', { name: 'Button1' })).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(buttonGroup.getByRole('button', { name: 'Button2' })).toHaveCSS('background-color', 'rgb(92, 179, 0)')
Comment on lines +8 to +9
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Outdated color values found in multiple files.

The shell script detected several instances of the old color values rgb(94, 124, 224) and rgb(80, 212, 171) across the codebase:

  • examples/sites/demos/pc/app/wizard/base-usage.spec.ts
  • examples/sites/demos/pc/app/wizard/vertical.spec.ts
  • examples/sites/demos/pc/app/time-line/status.spec.ts
  • examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js
  • examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
  • examples/sites/demos/pc/app/link/link-style.spec.ts
  • examples/sites/demos/pc/app/cascader-panel/basic-usage.spec.ts
  • examples/sites/demos/pc/app/checkbox/checkbox-slot.spec.ts
  • examples/sites/demos/pc/app/bulletin-board/active-name.spec.ts
  • examples/sites/demos/pc/app/bulletin-board/base.spec.ts
  • examples/sites/demos/pc/app/base-select/automatic-dropdown.spec.ts

These findings indicate that the color scheme updates are not consistently applied across the project. Please ensure that all instances of the old colors are updated to maintain design consistency and adhere to accessibility standards.

🔗 Analysis chain

Verify the new color scheme for buttons.

The background colors for 'Button1' and 'Button2' have been updated to rgb(25, 25, 25) and rgb(92, 179, 0) respectively. These changes appear intentional and likely reflect updates in the component's styling.

Please confirm that:

  1. These new colors align with the project's design system.
  2. The contrast ratios meet accessibility standards (WCAG 2.1 AA).
  3. The changes are consistent across all relevant components and themes.

You may want to run the following command to check for any other occurrences of the old color values:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for old color values in all files
rg -i 'rgb\(94,\s*124,\s*224\)|rgb\(80,\s*212,\s*171\)' --type css --type less --type scss --type js --type ts

Length of output: 141

Script:

#!/bin/bash
# Search for old color values in all files with corrected file types
rg -i 'rgb\(94,\s*124,\s*224\)|rgb\(80,\s*212,\s*171\)' --type css --type less --type sass --type js --type ts

Length of output: 3343

await expect(buttonGroup.getByRole('button', { name: 'Button3' })).toHaveClass(/is-disabled/)
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button-group/slot-empty.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ test('空数据插槽', async ({ page }) => {

const demo = page.locator('#slot-empty')
const emptySlot = demo.locator('.tiny-button-group .tiny-button-group--empty')
await expect(emptySlot.first()).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(emptySlot.first()).toHaveCSS('color', 'rgb(128, 128, 128)')
await expect(demo.locator('.tiny-button-group .custom-empty')).toHaveCSS('color', 'rgb(250, 194, 10)')
})
14 changes: 0 additions & 14 deletions examples/sites/demos/pc/app/button-group/webdoc/button-group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,20 +82,6 @@ export default {
},
codeFiles: ['show-more.vue']
},
{
demoId: 'show-edit',
name: {
'zh-CN': '编辑按钮',
'en-US': 'Display Edit Button'
},
desc: {
'zh-CN':
'<p>设置了显示更多按钮后，可以通过 <code>show-edit</code> 设置是否显示编辑按钮。点击编辑按钮后触发 <code>edit</code> 事件。</p>',
'en-US':
'<p>After setting up to display more buttons, You can set whether to display the edit button through <code>show edit</code> . After clicking the edit button, the <code>edit</code> event is triggered.</p>'
},
codeFiles: ['show-edit.vue']
},
{
demoId: 'slot-default',
name: {
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,8 +324,8 @@
--tv-color-bg-hover-primary: var(--tv-base-color-common-9); // #595959 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮
--tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
--tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff 浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
--tv-color-bg-hover-3: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
--tv-color-bg-hover-4: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色
--tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
--tv-color-bg-hover-3: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色

/* 2.6.4 active/选中 */
--tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色
Expand Down
Loading
Loading