fix: Styling issue where all spans next to a checkbox wrapper get a padding (#17761)

* fix styling issue

* Added padding for span only when there is a checkbox in front of it

* Fixed last small styling issue where span and checkboxes didnt have any padding

* Updated snapshots with new class

components/transfer/ListItem.tsx

@@ -37,7 +37,7 @@ export default class ListItem extends React.Component<any, any> {
         onClick={disabled || item.disabled ? undefined : () => onClick(item)}
       >
         <Checkbox checked={checked} disabled={disabled || item.disabled} />
-        <span>{renderedEl}</span>
+        <span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>
       </li>
     );
     let children: JSX.Element | null = null;

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -62,7 +62,9 @@ exports[`Transfer should render correctly 1`] = `
               />
             </span>
           </label>
-          <span />
+          <span
+            class="ant-transfer-list-content-item-text"
+          />
         </li>
         <li
           class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
@@ -83,7 +85,9 @@ exports[`Transfer should render correctly 1`] = `
               />
             </span>
           </label>
-          <span />
+          <span
+            class="ant-transfer-list-content-item-text"
+          />
         </li>
       </ul>
     </div>
@@ -197,7 +201,9 @@ exports[`Transfer should render correctly 1`] = `
               />
             </span>
           </label>
-          <span />
+          <span
+            class="ant-transfer-list-content-item-text"
+          />
         </li>
       </ul>
     </div>
@@ -266,7 +272,9 @@ exports[`Transfer should show sorted targetkey 1`] = `
               />
             </span>
           </label>
-          <span>
+          <span
+            class="ant-transfer-list-content-item-text"
+          >
             a
           </span>
         </li>
@@ -384,7 +392,9 @@ exports[`Transfer should show sorted targetkey 1`] = `
               />
             </span>
           </label>
-          <span>
+          <span
+            class="ant-transfer-list-content-item-text"
+          >
             c
           </span>
         </li>
@@ -407,7 +417,9 @@ exports[`Transfer should show sorted targetkey 1`] = `
               />
             </span>
           </label>
-          <span>
+          <span
+            class="ant-transfer-list-content-item-text"
+          >
             b
           </span>
         </li>

components/transfer/__tests__/__snapshots__/list.test.js.snap

@@ -60,7 +60,9 @@ exports[`Transfer.List should render correctly 1`] = `
             />
           </span>
         </label>
-        <span />
+        <span
+          class="ant-transfer-list-content-item-text"
+        />
       </li>
       <li
         class="ant-transfer-list-content-item"
@@ -81,7 +83,9 @@ exports[`Transfer.List should render correctly 1`] = `
             />
           </span>
         </label>
-        <span />
+        <span
+          class="ant-transfer-list-content-item-text"
+        />
       </li>
       <li
         class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
@@ -103,7 +107,9 @@ exports[`Transfer.List should render correctly 1`] = `
             />
           </span>
         </label>
-        <span />
+        <span
+          class="ant-transfer-list-content-item-text"
+        />
       </li>
     </ul>
   </div>

components/transfer/style/index.less

@@ -76,6 +76,10 @@
         position: absolute;
         right: 12px;
       }
+
+      .@{ant-prefix}-checkbox-wrapper + span {
+        padding-left: 8px;
+      }
     }
 
     &-body {
@@ -116,6 +120,9 @@
         > span {
           padding-right: 0;
         }
+        &-text {
+          padding-left: 8px;
+        }
       }
 
       &-item:not(&-item-disabled):hover {