fix(pro:tag-select): tag text shouldn't overflow when overlayMatchWid…

…th is true (#1878)
IDuxFE · Apr 8, 2024 · d2fcdbf · d2fcdbf
1 parent ce4f477
commit d2fcdbf
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 15 deletions.
diff --git a/packages/components/control-trigger/src/ControlTrigger.tsx b/packages/components/control-trigger/src/ControlTrigger.tsx
@@ -58,7 +58,7 @@ export default defineComponent({
       onFocus,
       onBlur,
     )
-    const { overlayOpened, overlayRef, overlayStyle, setOverlayOpened } = useOverlayState(
+    const { overlayOpened, overlayRef, overlayMatchWidth, overlayStyle, setOverlayOpened } = useOverlayState(
       props,
       defaultTriggerProps,
       triggerRef,
@@ -132,6 +132,7 @@ export default defineComponent({
       return normalizeClass({
         [globalHashId.value]: !!globalHashId.value,
         [`${prefixCls}-overlay`]: true,
+        [`${prefixCls}-overlay-match-width`]: overlayMatchWidth.value === true,
         [overlayClassName || '']: !!overlayClassName,
       })
     })

diff --git a/packages/components/control-trigger/src/composables/useOverlayState.ts b/packages/components/control-trigger/src/composables/useOverlayState.ts
@@ -16,6 +16,7 @@ import { type ɵTriggerInstance } from '@idux/components/_private/trigger'
 export interface OverlayStateContext {
   overlayRef: Ref<ControlTriggerOverlayInstance | undefined>
   overlayStyle: ComputedRef<CSSProperties | undefined>
+  overlayMatchWidth: ComputedRef<boolean | 'minWidth'>
   updateOverlay: (rect?: DOMRect) => void
   overlayOpened: ComputedRef<boolean>
   setOverlayOpened: (open: boolean) => void
@@ -35,14 +36,14 @@ export function useOverlayState(
 ): OverlayStateContext {
   const overlayRef = ref<ControlTriggerOverlayInstance>()
   const [overlayWidth, setOverlayWidth] = useState('')
-  const overlayStyle = computed(() => {
-    const { overlayMatchWidth = config.overlayMatchWidth } = props
 
-    if (!overlayMatchWidth) {
+  const overlayMatchWidth = computed(() => props.overlayMatchWidth ?? config.overlayMatchWidth)
+  const overlayStyle = computed(() => {
+    if (!overlayMatchWidth.value) {
       return
     }
 
-    return { [overlayMatchWidth === true ? 'width' : 'minWidth']: overlayWidth.value }
+    return { [overlayMatchWidth.value === true ? 'width' : 'minWidth']: overlayWidth.value }
   })
   const [_overlayOpened, setOverlayOpened] = useControlledProp(props, 'open', false)
   const overlayOpened = computed(() => !props.disabled && _overlayOpened.value)
@@ -83,5 +84,5 @@ export function useOverlayState(
     useResizeObserver(triggerRef, ({ contentRect }) => updateOverlay(contentRect))
   })
 
-  return { overlayRef, overlayStyle, updateOverlay, overlayOpened, setOverlayOpened }
+  return { overlayRef, overlayStyle, overlayMatchWidth, updateOverlay, overlayOpened, setOverlayOpened }
 }
diff --git a/packages/pro/dark.full.css b/packages/pro/dark.full.css
diff --git a/packages/pro/default.full.css b/packages/pro/default.full.css
@@ -92,7 +92,7 @@
   --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;
-  --ix-pro-tag-select-edit-panel-min-width: 225px;
+  --ix-pro-tag-select-edit-panel-min-width: 140px;
   --ix-pro-tag-select-tag-height: 20px;
 }
 

diff --git a/packages/pro/tag-select/docs/Theme.zh.md b/packages/pro/tag-select/docs/Theme.zh.md
@@ -1,7 +1,7 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
 | `colorIndicatorSize` | 颜色指示圆圈的尺寸 | `number` | `12` | `12` |
-| `editPanelMinWidth` | 编辑面板的最小宽度 | `number` | `225` | `225` |
+| `editPanelMinWidth` | 编辑面板的最小宽度 | `number` | `140` | `140` |
 | `panelMaxHeight` | 数据面板的最大高度 | `number` | `256` | `256` |
 | `presetColorBlueBg` | 预设蓝色背景色 | `string` | `rgb(232, 241, 255)` | `rgb(21, 36, 58)` |
 | `presetColorBlueLabel` | 预设蓝色文字色 | `string` | `#1c6eff` | `#4083E8` |

diff --git a/packages/pro/tag-select/src/content/TagSelectOption.tsx b/packages/pro/tag-select/src/content/TagSelectOption.tsx
@@ -85,7 +85,7 @@ export default defineComponent({
       return (
         <div class={classes.value} onClick={handleClick} onMouseenter={handleMouseEnter}>
           {slots.optionLabel?.(props.data) ?? (
-            <IxTag class={`${prefixCls}-option-tag`} shape="round" style={tagStyle.value}>
+            <IxTag class={`${prefixCls}-option-tag`} shape="round" style={tagStyle.value} title={label}>
               {slots.tagLabel?.(props.data) ?? label}
             </IxTag>
           )}

diff --git a/packages/pro/tag-select/style/index.less b/packages/pro/tag-select/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/variable/index.less';
 @import '../../../components/style/variable/index.less';
+@import '../../../components/style/mixins/ellipsis.less';
 @import '../../style/mixins/reset.less';
 
 .@{pro-tag-select-prefix} {
@@ -33,17 +34,29 @@
     &-tag {
       height: var(--ix-pro-tag-select-tag-height);
       line-height: calc(var(--ix-pro-tag-select-tag-height) - var(--ix-control-line-width) * 2);
+
+      .@{control-trigger-prefix}-overlay-match-width & {
+        max-width: calc(100% - var(--ix-font-size-icon) - var(--ix-margin-size-sm));
+
+        .@{tag-prefix}-content {
+          max-width: 100%;
+          .ellipsis();
+        }
+      }
     }
 
     &-edit-trigger {
       margin-left: auto;
       height: 100%;
       width: var(--ix-font-size-icon);
-      display: none;
+      display: flex;
       align-items: center;
       justify-content: center;
       font-size: var(--ix-font-size-icon);
       color: var(--ix-color-icon);
+      visibility: hidden;
+      pointer-events: none;
+      cursor: pointer;
 
       &:hover {
         color: var(--ix-color-icon-hover);
@@ -52,7 +65,8 @@
 
     &:hover {
       .@{pro-tag-select-prefix}-option-edit-trigger {
-        display: flex;
+        visibility: visible;
+        pointer-events: unset;
       }
     }
   }
@@ -150,9 +164,15 @@
   &-selected-tag {
     height: @select-item-height;
     line-height: @select-item-line-height;
+    max-width: 100%;
     margin: @select-margin-half 0;
     margin-inline-end: var(--ix-margin-size-xs);
 
+    .@{tag-prefix}-content {
+      max-width: 100%;
+      .ellipsis();
+    }
+
     &-remove-icon {
       margin-left: var(--ix-margin-size-xs);
       cursor: pointer;

diff --git a/packages/pro/tag-select/theme/dark.css b/packages/pro/tag-select/theme/dark.css
@@ -14,6 +14,6 @@
   --ix-pro-tag-select-preset-color-orange-bg: rgb(54, 36, 25);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;
-  --ix-pro-tag-select-edit-panel-min-width: 225px;
+  --ix-pro-tag-select-edit-panel-min-width: 140px;
   --ix-pro-tag-select-tag-height: 20px;
 }
diff --git a/packages/pro/tag-select/theme/default.css b/packages/pro/tag-select/theme/default.css
@@ -14,6 +14,6 @@
   --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;
-  --ix-pro-tag-select-edit-panel-min-width: 225px;
+  --ix-pro-tag-select-edit-panel-min-width: 140px;
   --ix-pro-tag-select-tag-height: 20px;
 }
diff --git a/packages/pro/tag-select/theme/default.ts b/packages/pro/tag-select/theme/default.ts
@@ -37,7 +37,7 @@ export function getDefaultThemeTokens(
     presetColorOrangeBg: getAlphaColor(orangeColor, tagCompColorAlpha, colorContainerBg),
     colorIndicatorSize: 12,
     panelMaxHeight: 256,
-    editPanelMinWidth: 225,
+    editPanelMinWidth: 140,
     tagHeight: 20,
   }
 }