fix(CheckTreePicker): fix CheckTreePicker label style (#2304)

rsuite · Jan 17, 2022 · 07eb5ac · 07eb5ac · vercel · Jan 17, 2022
1 parent 50f2429
commit 07eb5ac
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/CheckTreePicker/styles/index.less b/src/CheckTreePicker/styles/index.less
@@ -32,8 +32,8 @@
       margin: 0;
       //padding-left: 16px;
       padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-      //text gap + checkbox space
-      padding-left: 58px; // 10px + 36px + 12px
+      //text gap + checkbox space + label gap
+      padding-left: 50px; // 10px + 36px + 4px
 
       &::before {
         content: '';
@@ -44,7 +44,7 @@
 
         height: 100%;
         top: 0;
-        margin-left: -58px; // 10px + 36px + 12px
+        margin-left: -52px; // 10px + 36px + 6px
       }
     }
 
@@ -57,11 +57,11 @@
 // Only has the first level
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
   > label {
-    padding-left: 34px; //text gap + checkbox space
+    padding-left: 32px; //text gap + checkbox space
 
     &::before {
       width: 28px;
-      margin-left: -36px;
+      margin-left: -34px;
     }
   }
 

diff --git a/src/CheckTreePicker/test/CheckTreePickerStylesSpec.js b/src/CheckTreePicker/test/CheckTreePickerStylesSpec.js
@@ -37,13 +37,13 @@ describe('CheckTreePicker styles', () => {
     const instanceRef = React.createRef();
     render(<CheckTreePicker data={data} ref={instanceRef} open />);
     const itemLabel = document.body.querySelector('.rs-check-tree .rs-checkbox-checker label');
-    assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 58px');
+    assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 50px');
   });
 
   itChrome('Should render the correct styles when data has only one level structure', () => {
     const instanceRef = React.createRef();
     render(<CheckTreePicker data={[{ value: 1, label: 1 }]} ref={instanceRef} open />);
     const itemLabel = document.body.querySelector('.rs-check-tree .rs-checkbox-checker label');
-    assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 34px');
+    assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 32px');
   });
 });