mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

chore: auto merge branches (#46481)

Browse Source 
chore: feature merge master
This commit is contained in:
github-actions[bot] 2023-12-15 16:58:58 +00:00 committed by GitHub
commit 93acf04c3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1562 additions and 1600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2833
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

129
components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -108,132 +108,99 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-row ant-row-middle"
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-space-item"
>
<div
class="ant-space-item"
class="ant-color-picker-trigger"
>
<div
class="ant-col"
class="ant-color-picker-color-block"
>
<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>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-col"
>
HEX:
<span>
#1677ff
</span>
class="ant-color-picker-color-block-inner"
style="background:rgb(22, 119, 255)"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<span>
HEX:
<!-- -->
#1677ff
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-row ant-row-middle"
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-space-item"
>
<div
class="ant-space-item"
class="ant-color-picker-trigger"
>
<div
class="ant-col"
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-trigger"
>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background:rgb(23, 120, 255)"
/>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-col"
>
HSB:
<span>
hsb(215, 91%, 100%)
</span>
class="ant-color-picker-color-block-inner"
style="background:rgb(23, 120, 255)"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<span>
HSB:
<!-- -->
hsb(215, 91%, 100%)
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-row ant-row-middle"
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-space-item"
>
<div
class="ant-space-item"
class="ant-color-picker-trigger"
>
<div
class="ant-col"
class="ant-color-picker-color-block"
>
<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>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-col"
>
RGB:
<span>
rgb(22, 119, 255)
</span>
class="ant-color-picker-color-block-inner"
style="background:rgb(22, 119, 255)"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<span>
RGB:
<!-- -->
rgb(22, 119, 255)
</span>
</div>
</div>
</div>
</div>

114
components/color-picker/demo/format.tsx
View File

@ -1,77 +1,79 @@
import React, { useMemo, useState } from 'react';
import { Col, ColorPicker, Row, Space } from 'antd';
import React, { useState } from 'react';
import { ColorPicker, Space } from 'antd';
import type { ColorPickerProps } from 'antd/es/color-picker';
export default () => {
const HexCase: React.FC = () => {
const [colorHex, setColorHex] = useState<ColorPickerProps['value']>('#1677ff');
const [colorHsb, setColorHsb] = useState<ColorPickerProps['value']>('hsb(215, 91%, 100%)');
const [colorRgb, setColorRgb] = useState<ColorPickerProps['value']>('rgb(22, 119, 255)');
const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
const hexString = useMemo(
const hexString = React.useMemo(
() => (typeof colorHex === 'string' ? colorHex : colorHex?.toHexString()),
[colorHex],
);
const hsbString = useMemo(
return (
<Space>
<ColorPicker
format={formatHex}
value={colorHex}
onChange={setColorHex}
onFormatChange={setFormatHex}
/>
<span>HEX: {hexString}</span>
</Space>
);
};
const HsbCase: React.FC = () => {
const [colorHsb, setColorHsb] = useState<ColorPickerProps['value']>('hsb(215, 91%, 100%)');
const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
const hsbString = React.useMemo(
() => (typeof colorHsb === 'string' ? colorHsb : colorHsb?.toHsbString()),
[colorHsb],
);
const rgbString = useMemo(
return (
<Space>
<ColorPicker
format={formatHsb}
value={colorHsb}
onChange={setColorHsb}
onFormatChange={setFormatHsb}
/>
<span>HSB: {hsbString}</span>
</Space>
);
};
const RgbCase: React.FC = () => {
const [colorRgb, setColorRgb] = useState<ColorPickerProps['value']>('rgb(22, 119, 255)');
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
const rgbString = React.useMemo(
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb?.toRgbString()),
[colorRgb],
);
return (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatHex}
value={colorHex}
onChange={setColorHex}
onFormatChange={setFormatHex}
/>
</Col>
<Col>
HEX: <span>{hexString}</span>
</Col>
</Space>
</Row>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatHsb}
value={colorHsb}
onChange={setColorHsb}
onFormatChange={setFormatHsb}
/>
</Col>
<Col>
HSB: <span>{hsbString}</span>
</Col>
</Space>
</Row>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatRgb}
value={colorRgb}
onChange={setColorRgb}
onFormatChange={setFormatRgb}
/>
</Col>
<Col>
RGB: <span>{rgbString}</span>
</Col>
</Space>
</Row>
<Space>
<ColorPicker
format={formatRgb}
value={colorRgb}
onChange={setColorRgb}
onFormatChange={setFormatRgb}
/>
<span>RGB: {rgbString}</span>
</Space>
);
};
const Demo: React.FC = () => (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<HexCase />
<HsbCase />
<RgbCase />
</Space>
);
export default Demo;

62
components/color-picker/demo/presets.tsx
View File

@ -1,49 +1,17 @@
import React from 'react';
import { ColorPicker } from 'antd';
import { generate, green, presetPalettes, red } from '@ant-design/colors';
import { ColorPicker, theme } from 'antd';
import type { ColorPickerProps } from 'antd';
export default () => (
<ColorPicker
defaultValue="#1677ff"
presets={[
{
label: 'Recommended',
colors: [
'#000000',
'#000000E0',
'#000000A6',
'#00000073',
'#00000040',
'#00000026',
'#0000001A',
'#00000012',
'#0000000A',
'#00000005',
'#F5222D',
'#FA8C16',
'#FADB14',
'#8BBB11',
'#52C41A',
'#13A8A8',
'#1677FF',
'#2F54EB',
'#722ED1',
'#EB2F96',
'#F5222D4D',
'#FA8C164D',
'#FADB144D',
'#8BBB114D',
'#52C41A4D',
'#13A8A84D',
'#1677FF4D',
'#2F54EB4D',
'#722ED14D',
'#EB2F964D',
],
},
{
label: 'Recent',
colors: [],
},
]}
/>
);
type Presets = Required<ColorPickerProps>['presets'][number];
const genPresets = (presets = presetPalettes) =>
Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors }));
const Demo: React.FC = () => {
const { token } = theme.useToken();
const presets = genPresets({ primary: generate(token.colorPrimary), red, green });
return <ColorPicker presets={presets} defaultValue="#1677ff" />;
};
export default Demo;

24
scripts/visual-regression/build.ts
View File

@ -21,6 +21,8 @@ import { assert } from 'console';
const ALI_OSS_BUCKET = 'antd-visual-diff';
const isLocalEnv = process.env.LOCAL;
const compareScreenshots = async (
baseImgPath: string,
currentImgPath: string,
@ -131,7 +133,7 @@ function generateReport(
targetRef: string,
prId: string,
): [string, string] {
const publicPath = `${ossDomain}/pr-${prId}`;
const publicPath = isLocalEnv ? path.resolve(__dirname, '../..') : `${ossDomain}/pr-${prId}`;
const commonHeader = `
## Visual Regression Report for PR #${prId}
@ -209,20 +211,30 @@ ${commonHeader}
async function boot() {
const { prId, baseRef: targetBranch = 'master' } = parseArgs();
const baseImgSourceDir = path.resolve(__dirname, `../../imageSnapshots-${targetBranch}`);
console.log(
chalk.green(
'Preparing image snapshots from latest `%s` branch for pr %s\n',
targetBranch,
prId,
`Preparing image snapshots from latest \`${targetBranch}\` branch for pr \`${prId}\`\n`,
),
);
const baseImgSourceDir = path.resolve(__dirname, `../../imageSnapshots-${targetBranch}`);
await fse.ensureDir(baseImgSourceDir);
const targetRef = await getBranchLatestRef(targetBranch);
assert(targetRef, `Missing ref from ${targetBranch}`);
await downloadBaseSnapshots(targetRef, baseImgSourceDir);
if (!isLocalEnv) {
await downloadBaseSnapshots(targetRef, baseImgSourceDir);
} else if (!fse.existsSync(baseImgSourceDir)) {
console.log(
chalk.yellow(
`Please prepare image snapshots in folder \`$projectRoot/${path.basename(
baseImgSourceDir,
)}\` from latest \`${targetBranch}\` branch`,
),
);
process.exit(1);
}
const currentImgSourceDir = path.resolve(__dirname, '../../imageSnapshots');