From 8fbbb072a8052160324cddc7756b5b15a9d01b6c Mon Sep 17 00:00:00 2001
From: xzxldl55 <22699218+xzxldl55@users.noreply.github.com>
Date: Wed, 14 Sep 2022 22:37:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(checkbox):=20#1323=20=E4=BF=AE=E5=A4=8Dchec?=
 =?UTF-8?q?kboxGroup=E4=B8=8B=EF=BC=8C=E7=BB=84=E4=BB=B6=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/checkbox/src/checkbox.scss    | 15 ++++++++++++++-
 .../devui-vue/devui/checkbox/src/checkbox.tsx     |  2 +-
 .../devui/transfer/__tests__/transfer.spec.ts     |  7 +++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.scss b/packages/devui-vue/devui/checkbox/src/checkbox.scss
index ed3ed978d0..5ce3a58493 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.scss
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.scss
@@ -180,7 +180,8 @@ $checkbox-label-height-map: (
     cursor: pointer;
     color: $devui-text;
     margin: 0;
-    display: block;
+    display: flex;
+    align-items: center;
     @each $size in ('lg', 'md', 'sm') {
       &.#{$devui-prefix}-checkbox--#{$size} {
         display: flex;
@@ -213,7 +214,19 @@ $checkbox-label-height-map: (
       display: inline-block;
       box-sizing: content-box;
       vertical-align: top;
+
+      &.#{$devui-prefix}-checkbox__material {
+        flex-shrink: 0; // keep the checkbox icon width
+      }
+
+      &.#{$devui-prefix}-checkbox__label-text {
+        flex-shrink: 1; // just use flex box to shrink text width. let text ellipsis
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+
   }
 
   // 禁用状态透明色
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.tsx b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
index d950415082..2c75365c0f 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.tsx
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
@@ -89,7 +89,7 @@ export default defineComponent({
                   </g>
                 </svg>
               </span>
-              {props.label || ctx.slots.default?.()}
+              <span class={ns.e('label-text')}>{props.label || ctx.slots.default?.()}</span>
             </label>
           </div>
         </div>
diff --git a/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts b/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
index 134d4a684c..92284d3978 100644
--- a/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
+++ b/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
@@ -223,7 +223,10 @@ describe('d-transfer', () => {
       setTimeout(resolve, 500);
     });
     const firstCheckbox = wrapper.find(`${sourceClass} ${bodyClass} .devui-checkbox`);
-    expect(firstCheckbox.text()).toBe('北京北京');
-    expect(firstCheckbox.findAll('span')[2].attributes().style).toBe('color: rgb(94, 124, 224);');
+    const firstCheckboxTextLabel = firstCheckbox.find('.devui-checkbox__label-text span'); // the text element
+    expect(firstCheckboxTextLabel.text()).toBe('北京北京');
+
+    // check the checkbox props —— renderContent: h('span', { style: { color: '#5e7ce0' } }, [option.value, option.name])
+    expect(firstCheckboxTextLabel.attributes().style).toBe('color: rgb(94, 124, 224);');
   });
 });