feat(checkbox, radio): supports label line wrap, closes #2419

tusen-ai · Feb 27, 2022 · 2abc072 · 2abc072
1 parent ad3522d
commit 2abc072
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 49 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -13,6 +13,8 @@
 - `n-collapse` add `RTL` support.
 - `useMessage` adds `showIcon` prop, closes [#2495](https://github.com/TuSimple/naive-ui/issues/2495).
 - `useMessage` supports `'default'` `type`.
+- `n-checkbox` supports label line wrap, closes [#2419](https://github.com/TuSimple/naive-ui/issues/2419).
+- `n-radio` supports label line wrap, closes [#2419](https://github.com/TuSimple/naive-ui/issues/2419).
 
 ## 2.25.5 (2022-02-24)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -13,6 +13,8 @@
 - `n-collapse` 添加 `RTL` 支持
 - `useMessage` 新增 `showIcon` 属性，关闭 [#2495](https://github.com/TuSimple/naive-ui/issues/2495)
 - `useMessage` 支持 `'default'` 的 `type`
+- `n-checkbox` 支持内容折行，关闭 [#2419](https://github.com/TuSimple/naive-ui/issues/2419)
+- `n-radio` 支持内容折行，关闭 [#2419](https://github.com/TuSimple/naive-ui/issues/2419)
 
 ## 2.25.5 (2022-02-24)
 

diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx
@@ -248,11 +248,13 @@ export default defineComponent({
           colorDisabledChecked,
           borderDisabledChecked,
           labelPadding,
+          labelLineHeight,
           [createKey('fontSize', mergedSize)]: fontSize,
           [createKey('size', mergedSize)]: size
         }
       } = themeRef.value
       return {
+        '--n-label-line-height': labelLineHeight,
         '--n-size': size,
         '--n-bezier': cubicBezierEaseInOut,
         '--n-border-radius': borderRadius,
@@ -350,25 +352,28 @@ export default defineComponent({
           )
         }}
       >
-        <div class={`${mergedClsPrefix}-checkbox-box`}>
-          <NIconSwitchTransition>
-            {{
-              default: () =>
-                this.indeterminate ? (
-                  <div
-                    key="indeterminate"
-                    class={`${mergedClsPrefix}-checkbox-icon`}
-                  >
-                    {LineMark}
-                  </div>
-                ) : (
-                  <div key="check" class={`${mergedClsPrefix}-checkbox-icon`}>
-                    {CheckMark}
-                  </div>
-                )
-            }}
-          </NIconSwitchTransition>
-          <div class={`${mergedClsPrefix}-checkbox-box__border`} />
+        <div class={`${mergedClsPrefix}-checkbox-box-wrapper`}>
+          &nbsp;
+          <div class={`${mergedClsPrefix}-checkbox-box`}>
+            <NIconSwitchTransition>
+              {{
+                default: () =>
+                  this.indeterminate ? (
+                    <div
+                      key="indeterminate"
+                      class={`${mergedClsPrefix}-checkbox-icon`}
+                    >
+                      {LineMark}
+                    </div>
+                  ) : (
+                    <div key="check" class={`${mergedClsPrefix}-checkbox-icon`}>
+                      {CheckMark}
+                    </div>
+                  )
+              }}
+            </NIconSwitchTransition>
+            <div class={`${mergedClsPrefix}-checkbox-box__border`} />
+          </div>
         </div>
         {label !== null || $slots.default ? (
           <span class={`${mergedClsPrefix}-checkbox__label`} id={labelId}>

diff --git a/src/checkbox/src/styles/index.cssr.ts b/src/checkbox/src/styles/index.cssr.ts
@@ -2,6 +2,7 @@ import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'
 
 // vars:
+// --n-label-line-height
 // --n-bezier
 // --n-size
 // --n-border
@@ -26,14 +27,14 @@ import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'
 // --n-label-padding
 export default c([
   cB('checkbox', `
-    line-height: 1;
+    line-height: var(--n-label-line-height);
     font-size: var(--n-font-size);
     outline: none;
     cursor: pointer;
     display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    vertical-align: middle;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    word-break: break-word;
     --n-merged-color-table: var(--n-color-table);
   `, [
     c('&:hover', [
@@ -135,16 +136,24 @@ export default c([
         color: 'var(--n-text-color-disabled)'
       })
     ]),
+    cB('checkbox-box-wrapper', `
+      position: relative;
+      width: var(--n-size);
+      flex-shrink: 0;
+      flex-grow: 0;
+    `),
     cB('checkbox-box', `
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
       height: var(--n-size);
       width: var(--n-size);
       display: inline-block;
       box-sizing: border-box;
       border-radius: var(--n-border-radius);
       background-color: var(--n-color);
-      position: relative;
-      transition:
-        background-color 0.3s var(--n-bezier);
+      transition: background-color 0.3s var(--n-bezier);
     `, [
       cE('border', `
         transition:

diff --git a/src/checkbox/styles/light.ts b/src/checkbox/styles/light.ts
@@ -18,10 +18,12 @@ export const self = (vars: ThemeCommonVars) => {
     fontSizeSmall,
     fontSizeMedium,
     fontSizeLarge,
-    borderRadiusSmall
+    borderRadiusSmall,
+    lineHeight
   } = vars
   return {
     ...commonVariables,
+    labelLineHeight: lineHeight,
     fontSizeSmall,
     fontSizeMedium,
     fontSizeLarge,

diff --git a/src/radio/src/Radio.tsx b/src/radio/src/Radio.tsx
@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, CSSProperties } from 'vue'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { createKey } from '../../_utils'
+import { createKey, resolveWrappedSlot } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { radioLight, RadioTheme } from '../styles'
 import useRadio from './use-radio'
@@ -44,12 +44,14 @@ export default defineComponent({
           dotColorActive,
           dotColorDisabled,
           labelPadding,
+          labelLineHeight,
           [createKey('fontSize', size)]: fontSize,
           [createKey('radioSize', size)]: radioSize
         }
       } = themeRef.value
       return {
         '--n-bezier': cubicBezierEaseInOut,
+        '--n-label-line-height': labelLineHeight,
         '--n-box-shadow': boxShadow,
         '--n-box-shadow-active': boxShadowActive,
         '--n-box-shadow-disabled': boxShadowDisabled,
@@ -109,17 +111,23 @@ export default defineComponent({
           onFocus={this.handleRadioInputFocus}
           onBlur={this.handleRadioInputBlur}
         />
-        <div
-          class={[
-            `${mergedClsPrefix}-radio__dot`,
-            this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
-          ]}
-        />
-        {$slots.default ? (
-          <div ref="labelRef" class={`${mergedClsPrefix}-radio__label`}>
-            {$slots.default()}
-          </div>
-        ) : null}
+        <div class={`${mergedClsPrefix}-radio__dot-wrapper`}>
+          &nbsp;
+          <div
+            class={[
+              `${mergedClsPrefix}-radio__dot`,
+              this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
+            ]}
+          />
+        </div>
+        {resolveWrappedSlot($slots.default, (children) => {
+          if (!children) return null
+          return (
+            <div ref="labelRef" class={`${mergedClsPrefix}-radio__label`}>
+              {children}
+            </div>
+          )
+        })}
       </label>
     )
   }

diff --git a/src/radio/src/styles/radio.cssr.ts b/src/radio/src/styles/radio.cssr.ts
@@ -16,18 +16,22 @@ import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'
 // --n-text-color
 // --n-text-color-disabled
 // --n-label-padding
+// --n-label-line-height
 export default cB('radio', `
-  line-height: 1;
+  line-height: var(--n-label-line-height);
   outline: none;
   position: relative;
   user-select: none;
   display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
+  align-items: flex-start;
+  flex-wrap: nowrap;
   font-size: var(--n-font-size);
+  word-break: break-word;
 `, [
-  cE('dot', `
-    height: var(--n-radio-size);
+  cE('dot-wrapper', `
+    position: relative;
+    flex-shrink: 0;
+    flex-grow: 0;
     width: var(--n-radio-size);
   `),
   cB('radio-input', `
@@ -43,13 +47,18 @@ export default cB('radio', `
     cursor: pointer;
   `),
   cE('dot', `
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    height: var(--n-radio-size);
+    width: var(--n-radio-size);
     background: var(--n-color);
     box-shadow: var(--n-box-shadow);
+    border-radius: 50%;
     transition:
       background-color .3s var(--n-bezier),
       box-shadow .3s var(--n-bezier);
-      position: relative;
-      border-radius: 50%;
   `, [
     c('&::before', `
       content: "";
@@ -80,7 +89,6 @@ export default cB('radio', `
     color: var(--n-text-color);
     padding: var(--n-label-padding);
     display: inline-block;
-    white-space: nowrap;
     transition: color .3s var(--n-bezier);
   `),
   cNotM('disabled', `
@@ -110,7 +118,6 @@ export default cB('radio', `
         backgroundColor: 'var(--n-dot-color-disabled)'
       }),
       cM('checked', `
-        transform: scale(1);
         opacity: 1;
       `)
     ]),

diff --git a/src/radio/styles/light.ts b/src/radio/styles/light.ts
@@ -19,10 +19,12 @@ const self = (vars: ThemeCommonVars) => {
     fontSizeLarge,
     heightSmall,
     heightMedium,
-    heightLarge
+    heightLarge,
+    lineHeight
   } = vars
   return {
     ...commonVariables,
+    labelLineHeight: lineHeight,
     buttonHeightSmall: heightSmall,
     buttonHeightMedium: heightMedium,
     buttonHeightLarge: heightLarge,