mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fix: ColorPicker not support prefixCls (#46561)

Browse Source 
* fix: ColorPicker should support prefixCls

* test: add test case
This commit is contained in:
二货爱吃白萝卜 2023-12-21 14:39:43 +08:00 committed by GitHub
parent eff720837c
commit 76f6ddc7e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 115 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/color-picker/ColorPicker.tsx
View File

@ -12,8 +12,8 @@ import { getStatusClassNames } from '../_util/statusUtils';
import { devUseWarning } from '../_util/warning';
import type { ConfigConsumerProps } from '../config-provider/context';
import { ConfigContext } from '../config-provider/context';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import DisabledContext from '../config-provider/DisabledContext';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext, NoFormStyle } from '../form/context';
@ -33,7 +33,7 @@ import type {
TriggerType,
} from './interface';
import useStyle from './style';
import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util';
import { genAlphaColor, generateColor, getAlphaColor } from './util';
export type ColorPickerProps = Omit<
RcColorPickerProps,
@ -92,6 +92,7 @@ const ColorPicker: CompoundedComponent = (props) => {
className,
size: customizeSize,
rootClassName,
prefixCls: customizePrefixCls,
styles,
disabledAlpha = false,
onFormatChange,

2
components/color-picker/util.ts
View File

@ -2,8 +2,6 @@ import type { ColorGenInput } from '@rc-component/color-picker';
import type { Color } from './color';
import { ColorFactory } from './color';
export const customizePrefixCls = 'ant-color-picker';
export const generateColor = (color: ColorGenInput<Color>): Color => {
if (color instanceof ColorFactory) {
return color;

105
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -12543,6 +12543,111 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
</div>
`;
exports[`ConfigProvider components ColorPicker configProvider 1`] = `
<div
class="config-color-picker-trigger"
>
<div
class="config-color-picker-color-block"
>
<div
class="config-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker configProvider componentDisabled 1`] = `
<div
class="config-color-picker-trigger config-color-picker-trigger-disabled"
>
<div
class="config-color-picker-color-block"
>
<div
class="config-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker configProvider componentSize large 1`] = `
<div
class="config-color-picker-trigger config-color-picker-lg"
>
<div
class="config-color-picker-color-block"
>
<div
class="config-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker configProvider componentSize middle 1`] = `
<div
class="config-color-picker-trigger"
>
<div
class="config-color-picker-color-block"
>
<div
class="config-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker configProvider componentSize small 1`] = `
<div
class="config-color-picker-trigger config-color-picker-sm"
>
<div
class="config-color-picker-color-block"
>
<div
class="config-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker normal 1`] = `
<div
class="ant-color-picker-trigger"
>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components ColorPicker prefixCls 1`] = `
<div
class="prefix-ColorPicker-trigger"
>
<div
class="prefix-ColorPicker-color-block"
>
<div
class="prefix-ColorPicker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
`;
exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
<div>
<div

9
components/config-provider/__tests__/components.test.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React from 'react';
import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Alert from '../../alert';
import Anchor from '../../anchor';
import AutoComplete from '../../auto-complete';
@ -16,6 +18,7 @@ import Carousel from '../../carousel';
import Cascader from '../../cascader';
import Checkbox from '../../checkbox';
import Collapse from '../../collapse';
import ColorPicker from '../../color-picker';
import DatePicker from '../../date-picker';
import Divider from '../../divider';
import Drawer from '../../drawer';
@ -39,7 +42,6 @@ import Select from '../../select';
import Skeleton from '../../skeleton';
import type { SliderTooltipProps } from '../../slider';
import Slider from '../../slider';
import { render } from '../../../tests/utils';
import Spin from '../../spin';
import Statistic from '../../statistic';
import Steps from '../../steps';
@ -233,6 +235,9 @@ describe('ConfigProvider', () => {
</Collapse>
));
// ColorPicker
testPair('ColorPicker', (props) => <ColorPicker {...props} />);
// DatePicker
describe('DatePicker', () => {
testPair('DatePicker', (props) => (