From c23d1875fe8f15dc83ff955e19aa0d1c02cc0443 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 7 Aug 2024 23:18:34 +0800 Subject: [PATCH] fix: ColorPicker not support compact (#50291) * fix: ColorPicker not support compact * test: update snapshot * test: update snapshot --- components/color-picker/ColorPicker.tsx | 8 +- .../color-picker/components/ColorTrigger.tsx | 4 - components/color-picker/style/index.ts | 5 + .../__snapshots__/demo-extend.test.ts.snap | 389 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 21 + components/space/demo/compact.tsx | 5 + mako.config.json | 3 +- 7 files changed, 429 insertions(+), 6 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 198f7603dd..d82a10a0e2 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -14,6 +14,7 @@ import useSize from '../config-provider/hooks/useSize'; import { FormItemInputContext } from '../form/context'; import type { PopoverProps } from '../popover'; import Popover from '../popover'; +import { useCompactItemContext } from '../space/Compact'; import { AggregationColor } from './color'; import type { ColorPickerPanelProps } from './ColorPickerPanel'; import ColorPickerPanel from './ColorPickerPanel'; @@ -166,8 +167,12 @@ const ColorPicker: CompoundedComponent = (props) => { // ================== Form Status ================== const { status: contextStatus } = React.useContext(FormItemInputContext); + // ==================== Compact ==================== + const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); + // ===================== Style ===================== - const mergedSize = useSize(customizeSize); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); + const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); const rtlCls = { [`${prefixCls}-rtl`]: direction }; @@ -178,6 +183,7 @@ const ColorPicker: CompoundedComponent = (props) => { [`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-lg`]: mergedSize === 'large', }, + compactItemClassnames, colorPicker?.className, mergedRootCls, className, diff --git a/components/color-picker/components/ColorTrigger.tsx b/components/color-picker/components/ColorTrigger.tsx index e90b881260..60e210951d 100644 --- a/components/color-picker/components/ColorTrigger.tsx +++ b/components/color-picker/components/ColorTrigger.tsx @@ -51,10 +51,6 @@ const ColorTrigger = forwardRef((props, ref) } if (color.isGradient()) { - // return color - // .getColors() - // .map((c) => `${c.color.toRgbString()} ${c.percent}%`) - // .join(', '); return color.getColors().map((c, index) => { const inactive = activeIndex !== -1 && activeIndex !== index; diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index ed9a787402..9b8e8dce44 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -1,6 +1,7 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; +import { genCompactItemStyle } from '../../style/compact-item'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; import genColorBlockStyle from './color-block'; @@ -284,6 +285,10 @@ const genColorPickerStyle: GenerateStyle = (token) => { ...genRtlStyle(token), }, }, + + genCompactItemStyle(token, { + focusElCls: `${componentCls}-trigger-active`, + }), ]; }; diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 56309b98a0..acbd03c4dc 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8938,6 +8938,395 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`] +
+
+ +
+
+
+
+
+
+