feat(radio): [radio] Adapting to the SMB theme

opentiny · Sep 14, 2024 · 9923163 · 9923163
1 parent 71b1eae
commit 9923163
Show file tree

Hide file tree

Showing 8 changed files with 6 additions and 25 deletions.
diff --git a/examples/sites/demos/pc/app/radio/basic-usage.spec.ts b/examples/sites/demos/pc/app/radio/basic-usage.spec.ts
@@ -20,5 +20,5 @@ test('基本用法', async ({ page }) => {
     return {}
   })
 
-  expect(afterElement.backgroundColor).toBe('rgb(94, 124, 224)')
+  expect(afterElement.backgroundColor).toBe('rgb(20, 118, 255)')
 })
diff --git a/examples/sites/demos/pc/app/radio/radio-size.spec.ts b/examples/sites/demos/pc/app/radio/radio-size.spec.ts
@@ -7,10 +7,10 @@ test('尺寸设置', async ({ page }) => {
   const demo = page.locator('#radio-size')
   const radioGroup = demo.locator('.tiny-radio-group')
 
-  await expect(radioGroup.first()).toHaveCSS('width', '183px')
+  await expect(radioGroup.first()).toHaveCSS('width', '184px')
   await expect(radioGroup.first()).toHaveCSS('height', '32px')
-  await expect(radioGroup.nth(1)).toHaveCSS('width', '171px')
+  await expect(radioGroup.nth(1)).toHaveCSS('width', '184px')
   await expect(radioGroup.nth(1)).toHaveCSS('height', '28px')
-  await expect(radioGroup.nth(2)).toHaveCSS('width', '139px')
+  await expect(radioGroup.nth(2)).toHaveCSS('width', '152px')
   await expect(radioGroup.nth(2)).toHaveCSS('height', '24px')
 })
diff --git a/packages/theme/src/radio-button/index.less b/packages/theme/src/radio-button/index.less
@@ -20,7 +20,6 @@
 
   border-radius: var(--ti-radio-button-border-radius);
   &:first-child &__inner {
-    border-left: var(--ti-radio-button-border-left) solid var(--ti-radio-button-border-color);
     border-radius: var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius);
   }
 
@@ -52,7 +51,6 @@
     padding: var(--ti-radio-button-padding-verticals) 24px;
     font-weight: 500;
     border-radius: var(--ti-radio-button-border-radius);
-    border-left: 0;
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
@@ -70,7 +68,6 @@
     &:hover {
       color: var(--ti-radio-button-hover-text-color);
       background-color: var(--ti-radio-button-checked-hover-bg-color);
-      border-color: var(--ti-radio-button-checked-hover-border-color);
       outline: 0;
     }
 
@@ -93,12 +90,10 @@
       & + .@{radio-button-prefix-cls}__inner {
         color: #fff;
         background-color: var(--ti-radio-button-checked-normal-bg-color);
-        border-color: var(--ti-radio-button-checked-normal-border-color);
         box-shadow: var(--ti-radio-button-checked-normal-box-shadow);
 
         &:hover {
           background-color: var(--ti-radio-button-checked-hover-bg-color);
-          border-color: var(--ti-radio-button-checked-hover-border-color);
           box-shadow: var(--ti-radio-button-checked-hover-box-shadow);
         }
       }
@@ -119,10 +114,6 @@
       & + .@{radio-button-prefix-cls}__inner {
         background-color: var(--ti-radio-button-checked-disabled-bg-color);
         color: var(--ti-radio-button-disabled-checked-text-color);
-        &,
-        &:hover {
-          border-color: var(--ti-radio-button-checked-disabled-border-color);
-        }
       }
     }
   }

diff --git a/packages/theme/src/radio-button/vars.less b/packages/theme/src/radio-button/vars.less
@@ -13,15 +13,12 @@
 .component-css-vars-radio-button() {
   --ti-radio-button-text-color: var(--ti-common-color-text-secondary);
   --ti-radio-button-hover-text-color: var(--ti-common-color-bg-emphasize);
-  --ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8);
   --ti-radio-button-border-radius: var(--ti-common-space-6);
   --ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
   --ti-radio-button-bg-color: var(--ti-common-color-bg-normal);
   --ti-radio-button-checked-normal-bg-color: #1476FF;
-  --ti-radio-button-checked-normal-border-color: #1476FF;
   --ti-radio-button-checked-normal-box-shadow: #1476FF;
   --ti-radio-button-checked-hover-bg-color: var(--ti-common-color-prompt-bg);
-  --ti-radio-button-checked-hover-border-color: #1293ff;
   --ti-radio-button-checked-hover-box-shadow: #1293ff;
   --ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
   --ti-radio-button-disabled-checked-text-color: var(--ti-common-color-text-weaken);

diff --git a/packages/theme/src/radio-group/index.less b/packages/theme/src/radio-group/index.less
@@ -42,7 +42,6 @@
 
       &:first-child .@{radio-button-prefix-cls}__inner {
         border-radius: var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius);
-        border-top: var(--ti-radio-button-border-top) solid var(--ti-radio-button-border-color);
       }
 
       &:last-child .@{radio-button-prefix-cls}__inner {
@@ -58,10 +57,5 @@
         border-color: var(--ti-radio-input-checked-disabled-border-color);
       }
     }
-
-    .@{radio-button-prefix-cls}__inner {
-      border-top: 0;
-      border-left: 1px solid var(--ti-radio-button-border-color);
-    }
   }
 }
diff --git a/packages/theme/src/radio-group/vars.less b/packages/theme/src/radio-group/vars.less
@@ -15,5 +15,4 @@
   --ti-radio-button-margin-bottom: 2px;
   --ti-radio-button-top-border-radius: 6px;
   --ti-radio-button-bottom-border-radius: 6px;
-  --ti-radio-button-border-top: 0;
 }
diff --git a/packages/vue/src/radio-group/src/index.ts b/packages/vue/src/radio-group/src/index.ts
@@ -18,7 +18,7 @@ export const radioGroupProps = {
   modelValue: {},
   size: {
     type: String as PropType<'mini' | 'small' | 'medium'>,
-    default: ''
+    default: 'small'
   },
   fill: String,
   textColor: String,

diff --git a/packages/vue/src/radio/src/index.ts b/packages/vue/src/radio/src/index.ts
@@ -30,7 +30,7 @@ export const radioProps = {
   border: Boolean,
   size: {
     type: String as PropType<'mini' | 'small' | 'medium'>,
-    default: ''
+    default: 'small'
   },
   text: String,
   events: {