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

opentiny · Oct 16, 2024 · 95854ea · 95854ea
1 parent 3b48111
commit 95854ea
Show file tree

Hide file tree

Showing 20 changed files with 144 additions and 499 deletions.
diff --git a/examples/sites/demos/apis/button-group.js b/examples/sites/demos/apis/button-group.js
@@ -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',
@@ -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',
@@ -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: [],

diff --git a/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts b/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts
@@ -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)')
   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')

diff --git a/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts b/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts
@@ -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)

diff --git a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/button-group/disabled.spec.ts b/examples/sites/demos/pc/app/button-group/disabled.spec.ts
@@ -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()

diff --git a/examples/sites/demos/pc/app/button-group/disabled.vue b/examples/sites/demos/pc/app/button-group/disabled.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue b/examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue
diff --git a/examples/sites/demos/pc/app/button-group/show-edit.spec.ts b/examples/sites/demos/pc/app/button-group/show-edit.spec.ts
diff --git a/examples/sites/demos/pc/app/button-group/show-edit.vue b/examples/sites/demos/pc/app/button-group/show-edit.vue
diff --git a/examples/sites/demos/pc/app/button-group/size-composition-api.vue b/examples/sites/demos/pc/app/button-group/size-composition-api.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/button-group/size.spec.ts b/examples/sites/demos/pc/app/button-group/size.spec.ts
@@ -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()
@@ -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)
 })
diff --git a/examples/sites/demos/pc/app/button-group/size.vue b/examples/sites/demos/pc/app/button-group/size.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/button-group/slot-default.spec.ts b/examples/sites/demos/pc/app/button-group/slot-default.spec.ts
@@ -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)')
   await expect(buttonGroup.getByRole('button', { name: 'Button3' })).toHaveClass(/is-disabled/)
 })
diff --git a/examples/sites/demos/pc/app/button-group/slot-empty.spec.ts b/examples/sites/demos/pc/app/button-group/slot-empty.spec.ts
@@ -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)')
 })
diff --git a/examples/sites/demos/pc/app/button-group/webdoc/button-group.js b/examples/sites/demos/pc/app/button-group/webdoc/button-group.js
@@ -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: {

diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
@@ -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  分页选中背景色/左侧导航选中背景色