fix: checkbox & radio in flex align (#30260)

* fix: checkbox & radio in flex align * rm only md * docs: Update doc * test: Update snapshot
ant-design · Apr 22, 2021 · 7c2c493 · 7c2c493
1 parent 37c1c30
commit 7c2c493
Show file tree

Hide file tree

Showing 7 changed files with 387 additions and 99 deletions.
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -158,6 +158,209 @@ Array [
 ]
 `;
 
+exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
+<div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="border:1px solid red;margin-bottom:16px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <label
+        class="ant-checkbox-wrapper"
+      >
+        <span
+          class="ant-checkbox"
+        >
+          <input
+            class="ant-checkbox-input"
+            type="checkbox"
+            value="light"
+          />
+          <span
+            class="ant-checkbox-inner"
+          />
+        </span>
+      </label>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <div>
+        Bamboo
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <label
+        class="ant-checkbox-wrapper"
+      >
+        <span
+          class="ant-checkbox"
+        >
+          <input
+            class="ant-checkbox-input"
+            type="checkbox"
+            value="little"
+          />
+          <span
+            class="ant-checkbox-inner"
+          />
+        </span>
+        <span>
+          Little
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="border:1px solid red;margin-bottom:16px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <label
+        class="ant-radio-wrapper"
+      >
+        <span
+          class="ant-radio"
+        >
+          <input
+            class="ant-radio-input"
+            type="radio"
+            value="light"
+          />
+          <span
+            class="ant-radio-inner"
+          />
+        </span>
+      </label>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <div>
+        Bamboo
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <label
+        class="ant-radio-wrapper"
+      >
+        <span
+          class="ant-radio"
+        >
+          <input
+            class="ant-radio-input"
+            type="radio"
+            value="little"
+          />
+          <span
+            class="ant-radio-inner"
+          />
+        </span>
+        <span>
+          Little
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+  >
+    <label
+      class="ant-checkbox-wrapper"
+    >
+      <span
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+          value="light"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+    </label>
+    <div>
+      Bamboo
+    </div>
+    <label
+      class="ant-checkbox-wrapper"
+    >
+      <span
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+          value="little"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        Little
+      </span>
+    </label>
+  </div>
+  <div
+    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+  >
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="light"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+    </label>
+    <div>
+      Bamboo
+    </div>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="little"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Little
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
 Array [
   <label

diff --git a/components/checkbox/demo/debug-line.md b/components/checkbox/demo/debug-line.md
@@ -0,0 +1,65 @@
+---
+order: 99
+title:
+  zh-CN: 同行布局
+  en-US: Same line
+debug: true
+---
+
+## zh-CN
+
+同行布局
+
+## en-US
+
+Same line
+
+```tsx
+import { Checkbox, Radio, Space } from 'antd';
+
+const sharedStyle: React.CSSProperties = {
+  border: '1px solid red',
+  marginBottom: 16,
+};
+
+ReactDOM.render(
+  <div>
+    <Space style={sharedStyle} align="center">
+      <Checkbox value="light" />
+      <div>Bamboo</div>
+      <Checkbox value="little">Little</Checkbox>
+    </Space>
+
+    <Space style={sharedStyle} align="center">
+      <Radio value="light" />
+      <div>Bamboo</div>
+      <Radio value="little">Little</Radio>
+    </Space>
+
+    <div
+      style={{
+        ...sharedStyle,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Checkbox value="light" />
+      <div>Bamboo</div>
+      <Checkbox value="little">Little</Checkbox>
+    </div>
+
+    <div
+      style={{
+        ...sharedStyle,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Radio value="light" />
+      <div>Bamboo</div>
+      <Radio value="little">Little</Radio>
+    </div>
+  </div>,
+  mountNode,
+);
+```
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -151,6 +151,13 @@
     line-height: unset;
     cursor: pointer;
 
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
     &.@{checkbox-prefix-cls}-wrapper-disabled {
       cursor: not-allowed;
     }