From d03977b113d9f0319c51c848b9c2c31f61f6bb46 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, 20 Sep 2023 16:30:13 +0800 Subject: [PATCH 1/8] fix: dropdown should not block ref (#44971) --- components/dropdown/__tests__/index.test.tsx | 16 ++++++++++++++-- components/menu/OverrideContext.tsx | 10 ++++++---- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx index 9d1802e3c0..ec6aef1d7f 100644 --- a/components/dropdown/__tests__/index.test.tsx +++ b/components/dropdown/__tests__/index.test.tsx @@ -1,11 +1,12 @@ -import type { TriggerProps } from '@rc-component/trigger'; import React from 'react'; +import type { TriggerProps } from '@rc-component/trigger'; + import type { DropDownProps } from '..'; import Dropdown from '..'; +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; let triggerProps: TriggerProps; @@ -252,4 +253,15 @@ describe('Dropdown', () => { errorSpy.mockRestore(); }); + + it('not block ref', () => { + const divRef = React.createRef(); + render( +
}> + + , + ); + + expect(divRef.current).toBeTruthy(); + }); }); diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index f8b9720379..15d65c66e1 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; +import { supportNodeRef, useComposeRef } from 'rc-util'; + import { NoCompactStyle } from '../space/Compact'; import type { MenuProps } from './menu'; -import { supportNodeRef } from 'rc-util'; // Used for Dropdown only export interface OverrideContextProps { @@ -35,12 +36,13 @@ export const OverrideProvider = React.forwardRef< ], ); + const canRef = supportNodeRef(children); + const mergedRef = useComposeRef(ref, canRef ? (children as any).ref : null); + return ( - {supportNodeRef(children) - ? React.cloneElement(children as React.ReactElement, { ref }) - : children} + {canRef ? React.cloneElement(children as React.ReactElement, { ref: mergedRef }) : children} ); From e41026ab596bb99ae3852daf86d4e717673728dc Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 20 Sep 2023 16:50:55 +0800 Subject: [PATCH 2/8] docs: fix site issues (#44970) --- .dumi/hooks/useThemeAnimation.ts | 2 +- .dumi/theme/common/styles/Common.tsx | 8 +++ .dumi/theme/layouts/GlobalLayout.tsx | 4 ++ .dumi/theme/slots/Header/index.tsx | 75 +++++++++++++--------------- 4 files changed, 49 insertions(+), 40 deletions(-) diff --git a/.dumi/hooks/useThemeAnimation.ts b/.dumi/hooks/useThemeAnimation.ts index ebe5c4a7c5..34b72e7809 100644 --- a/.dumi/hooks/useThemeAnimation.ts +++ b/.dumi/hooks/useThemeAnimation.ts @@ -76,7 +76,7 @@ const useThemeAnimation = () => { [data-prefers-color='dark'] { color-scheme: light !important; } - + [data-prefers-color='light'] { color-scheme: dark !important; } diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx index 6cf0de24b2..b055c80ed8 100644 --- a/.dumi/theme/common/styles/Common.tsx +++ b/.dumi/theme/common/styles/Common.tsx @@ -63,6 +63,14 @@ export default () => { html { scroll-padding-top: ${headerHeight + margin}px; } + + [data-prefers-color='dark'] { + color-scheme: dark; + } + + [data-prefers-color='light'] { + color-scheme: light; + } `} /> ); diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 262a9771c5..6425b54d1d 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -80,6 +80,10 @@ const GlobalLayout: React.FC = () => { ...nextSearchParams, theme: value.filter((t) => t !== 'light'), }); + + document + .querySelector('html') + ?.setAttribute('data-prefers-color', value.includes('dark') ? 'dark' : 'light'); } }); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index c448dc7220..39852aa649 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; -import { Alert, Col, Popover, Row, Select } from 'antd'; +import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; import dayjs from 'dayjs'; @@ -120,9 +120,9 @@ const useStyle = createStyles(({ token, css }) => { }, banner: css` width: 100%; - background: #daf5eb; text-align: center; word-break: keep-all; + user-select: none; `, link: css` margin-left: 10px; @@ -136,9 +136,6 @@ const useStyle = createStyles(({ token, css }) => { width: 22px; height: 22px; `, - message: css` - color: rgba(0, 0, 0, 0.88); - `, }; }); @@ -364,40 +361,40 @@ const Header: React.FC = () => { )} {isZhCN && bannerVisible && ( - - yuque - - {isMobile ? locale.shortMessage : locale.message} - - { - window.gtag?.('event', '点击', { - event_category: 'top_banner', - event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd', - }); - }} - > - {locale.more} - - - } - type="info" - banner - closable - showIcon={false} - onClose={onBannerClose} - /> + + + yuque + {isMobile ? locale.shortMessage : locale.message} + { + window.gtag?.('event', '点击', { + event_category: 'top_banner', + event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd', + }); + }} + > + {locale.more} + + + } + type="info" + banner + closable + showIcon={false} + onClose={onBannerClose} + /> + )} From a9d6422722151b81a0deabf97c2ebd32fcbb46a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Wed, 20 Sep 2023 16:59:56 +0800 Subject: [PATCH 3/8] docs: improve display of color block in docs (#44790) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: update blog style * Revert "chore: update blog style" This reverts commit afc0a1d927e59ee4f30ad3dcbec40e85785ff188. * Revert "site: update docs styles (#39348)" This reverts commit 4a803962eba9d8f334eaaf5590815ddc041d26f6. # Conflicts: # .dumi/theme/builtins/ColorChunk/index.tsx # .dumi/theme/builtins/TokenTable/index.tsx # docs/react/customize-theme.en-US.md # docs/react/customize-theme.zh-CN.md * chore: revert * chore：revert * chore: rename props * chore: update * chore(deps): add `dumi-plugin-color-chunk` plugin * chore: update docs * chore: update * Update package.json Co-authored-by: afc163 Signed-off-by: 红 * docs: pick #44945 Co-authored-by: RedJue --------- Signed-off-by: 红 Signed-off-by: 红 Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: afc163 Co-authored-by: RedJue --- .dumi/theme/builtins/ColorChunk/index.tsx | 8 ++++---- .dumi/theme/builtins/TokenTable/index.tsx | 2 +- .dumirc.ts | 1 + docs/blog/color-picker.en-US.md | 16 +++++++++++----- docs/blog/color-picker.zh-CN.md | 12 +++++------- docs/react/migration-v5.en-US.md | 2 +- docs/react/migration-v5.zh-CN.md | 2 +- docs/spec/colors.en-US.md | 21 ++++++++++----------- docs/spec/colors.zh-CN.md | 21 ++++++++++----------- package.json | 1 + 10 files changed, 45 insertions(+), 41 deletions(-) diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx index 04e5ade72d..598abb34b2 100644 --- a/.dumi/theme/builtins/ColorChunk/index.tsx +++ b/.dumi/theme/builtins/ColorChunk/index.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; interface ColorChunkProps { children?: React.ReactNode; - color?: ColorInput; + value?: ColorInput; } const useStyle = createStyles(({ token, css }) => ({ @@ -27,12 +27,12 @@ const useStyle = createStyles(({ token, css }) => ({ const ColorChunk: React.FC = (props) => { const { styles } = useStyle(); - const { color, children } = props; + const { value, children } = props; const dotColor = React.useMemo(() => { - const _color = new TinyColor(color).toHex8String(); + const _color = new TinyColor(value).toHex8String(); return _color.endsWith('ff') ? _color.slice(0, -2) : _color; - }, [color]); + }, [value]); return ( diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx index 00e885c4af..6cb8fdfdf1 100644 --- a/.dumi/theme/builtins/TokenTable/index.tsx +++ b/.dumi/theme/builtins/TokenTable/index.tsx @@ -78,7 +78,7 @@ export function useColumns(): Exclude['columns'], undefine typeof record.value === 'string' && (record.value.startsWith('#') || record.value.startsWith('rgb')); if (isColor) { - return {record.value}; + return {record.value}; } return typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value; }, diff --git a/.dumirc.ts b/.dumirc.ts index b6aa833feb..16fd2d16c5 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -6,6 +6,7 @@ import { version } from './package.json'; import * as fs from 'fs-extra'; export default defineConfig({ + plugins: ['dumi-plugin-color-chunk'], conventionRoutes: { // to avoid generate routes for .dumi/pages/index/components/xx exclude: [new RegExp('index/components/')], diff --git a/docs/blog/color-picker.en-US.md b/docs/blog/color-picker.en-US.md index afa9040e9f..c580696d49 100644 --- a/docs/blog/color-picker.en-US.md +++ b/docs/blog/color-picker.en-US.md @@ -12,19 +12,19 @@ Before we start implementing, we need to understand a concept: color models. A c ### RGB Color Model -The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 2563 colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/266228482-f1ff94b1-e7ca-40c5-8512-1bc5ab79c388.jpg) +The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 2563 colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png) -In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `(255, 0, 0)`, green can be represented as `(0, 255, 0)`, and blue can be represented as `(0, 0, 255)`. +In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `rgb(255, 0, 0)`, green can be represented as `rgb(0, 255, 0)`, and blue can be represented as `rgb(0, 0, 255)`. ### HSV/HSB Color Model -The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/266231236-d68ad9d7-9654-4bc5-8489-7cc52f2aabb1.png) +The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png) -In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `(0, 100, 100)`, green can be represented as `(120, 100, 100)`, and blue can be represented as `(240, 100, 100)`. +In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `hsv(0, 100, 100)`, green can be represented as `hsv(120, 100, 100)`, and blue can be represented as `hsv(240, 100, 100)`. ### HEX Color Model -The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) +The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/268841812-1b8310f5-322b-45ec-b768-d4115cf7091d.png) This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers. @@ -111,3 +111,9 @@ So far, we have obtained a color picker with complete hue, saturation, and brigh ## Summary Through this development journey, I have gained a deeper understanding of color models and the development process of Ant Design. Thanks to the Ant Design team for giving me this opportunity, and thank you all for reading. If you are interested in the implementation details, you can check out the source code implementation at [@rc-component/color-picker](https://github.com/react-component/color-picker). + +## References + +- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png +- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png +- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg diff --git a/docs/blog/color-picker.zh-CN.md b/docs/blog/color-picker.zh-CN.md index 1589106dfe..7c695b7912 100644 --- a/docs/blog/color-picker.zh-CN.md +++ b/docs/blog/color-picker.zh-CN.md @@ -14,13 +14,13 @@ author: Redjue `RGB` 色彩模型是通过三原色（红、绿、蓝）的不同组合来表示色彩的，每个原色的取值范围是 0-255，三原色的组合可以表示 2563 种颜色，这些颜色可以组成一个立方体，如下图所示： ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png) -在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `(255, 0, 0)`，绿色可以表示为 `(0, 255, 0)`，蓝色可以表示为 `(0, 0, 255)`。 +在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `rgb(255, 0, 0)`，绿色可以表示为 `rgb(0, 255, 0)`，蓝色可以表示为 `rgb(0, 0, 255)`。 ### HSV/HSB 色彩模型 `HSV` 色彩模型是通过色相（Hue）、饱和度（Saturation）、明度（Value）来表示色彩的，其中色相的取值范围是 0-360，饱和度和明度的取值范围是 0-100。HSV 色彩模型可以用一个圆锥体来表示，如下图所示： ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png) -在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `(0, 100, 100)`，绿色可以表示为 `(120, 100, 100)`，蓝色可以表示为 `(240, 100, 100)`。 +在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `hsv(0, 100, 100)`，绿色可以表示为 `hsv(120, 100, 100)`，蓝色可以表示为 `hsv(240, 100, 100)`。 ### HEX 色彩模型 @@ -114,8 +114,6 @@ const alpha = (offset.x + centerOffsetX) / width; ## 图片来源 -https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png - -https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png - -https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg +- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png +- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png +- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index 94705e1455..66f9c29760 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -17,7 +17,7 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio ### Design specification - Basic rounded corner adjustment, changed from `2px` to four layers of radius, which are `2px` `4px` `6px` and `8px`. For example, radius of default Button is modified from `2px` to `6px`. -- Primary color adjustment, changed from to . +- Primary color adjustment, changed from `#1890ff` to `#1677ff`. - Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g). - Overall reduction in wireframe usage. diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md index 385e2061b8..61de39c111 100644 --- a/docs/react/migration-v5.zh-CN.md +++ b/docs/react/migration-v5.zh-CN.md @@ -18,7 +18,7 @@ tag: Updated ### 设计规范调整 - 基础圆角调整，由统一的 `2px` 改为四级圆角，分别为 `2px` `4px` `6px` `8px`，分别应用于不同场景，比如默认尺寸的 Button 的圆角调整为了 `6px`。 -- 主色调整，由 改为 。 +- 主色调整，由 `#1890ff` 改为 `#1677ff`。 - 整体阴影调整，由原本的三级阴影调整为两级，分别用于常驻页面的组件（如 Card）和交互反馈（如 Dropdown）。 - 部分组件内间距调整。 - 整体去线框化。 diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index a2991093d5..7aba6d946c 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -46,19 +46,18 @@ If the above palettes do not meet your needs, you can choose a main color below, We provide JavaScript usage for developers. -- **JavaScript** +```bash +npm install @ant-design/colors +``` - ``` - npm install @ant-design/colors - ``` +```js +import { blue } from '@ant-design/colors'; - ```js - import { blue } from '@ant-design/colors'; - console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766'] - console.log(blue.primary); // '#1890FF' - ``` +console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66'] +console.log(blue.primary); // '#1677FF' +``` - More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors) +More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors) --- @@ -70,7 +69,7 @@ We provide JavaScript usage for developers. -The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is , application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes. +The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is `#1677ff`, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes. ### Functional Color diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index f69dc1e428..5153c6a6f3 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -54,19 +54,18 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 我们为程序员提供了色板的 JavaScript 的使用方式。 -- **JavaScript** +``` +npm install @ant-design/colors +``` - ``` - npm install @ant-design/colors - ``` +```js +import { blue } from '@ant-design/colors'; - ```js - import { blue } from '@ant-design/colors'; - console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766'] - console.log(blue.primary); // '#1890FF' - ``` +console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66'] +console.log(blue.primary); // '#1677FF' +``` - 更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors) +更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors) --- @@ -78,7 +77,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 -品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 ，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 +品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1677ff`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 ### 功能色 diff --git a/package.json b/package.json index 67de87d658..d282d95888 100644 --- a/package.json +++ b/package.json @@ -218,6 +218,7 @@ "crypto": "^1.0.1", "dekko": "^0.2.1", "dumi": "^2.2.10", + "dumi-plugin-color-chunk": "^1.0.2", "duplicate-package-checker-webpack-plugin": "^3.0.0", "esbuild-loader": "^4.0.0", "eslint": "^8.40.0", From b53f8af15ce097cf61a65a56b30fa66f0e5e9da7 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, 20 Sep 2023 19:14:00 +0800 Subject: [PATCH 4/8] chore: bump select like rc (#44978) --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d282d95888..910d13890d 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1", "qrcode.react": "^3.1.0", - "rc-cascader": "~3.16.0", + "rc-cascader": "~3.17.0", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.1", "rc-dialog": "~9.2.0", @@ -143,7 +143,7 @@ "rc-rate": "~2.12.0", "rc-resize-observer": "^1.3.1", "rc-segmented": "~2.2.2", - "rc-select": "~14.8.1", + "rc-select": "~14.9.0", "rc-slider": "~10.2.1", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", @@ -152,7 +152,7 @@ "rc-textarea": "~1.4.0", "rc-tooltip": "~6.0.1", "rc-tree": "~5.7.12", - "rc-tree-select": "~5.12.1", + "rc-tree-select": "~5.13.0", "rc-upload": "~4.3.4", "rc-util": "^5.37.0", "scroll-into-view-if-needed": "^3.0.3", From 23298800749956c5d9e857dc3a28888c0e800e54 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, 20 Sep 2023 19:59:26 +0800 Subject: [PATCH 5/8] fix: Popover / Tooltip jump when height change (#44976) * chore: use dynamicInset * test: update snapshot * test: update snapshot * chore: bump rc-trigger * chore: update snapshot --- components/_util/placements.ts | 2 + .../__snapshots__/index.test.tsx.snap | 2 +- components/select/useBuiltinPlacements.tsx | 5 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 40 ++++++++---- .../__snapshots__/demo.test.tsx.snap | 40 ++++++++---- components/tooltip/demo/arrow.tsx | 2 +- components/tooltip/demo/placement.tsx | 65 ++++++++++++++----- package.json | 2 +- 9 files changed, 108 insertions(+), 52 deletions(-) diff --git a/components/_util/placements.ts b/components/_util/placements.ts index 4a8792d68b..303e0bf81c 100644 --- a/components/_util/placements.ts +++ b/components/_util/placements.ts @@ -1,5 +1,6 @@ /* eslint-disable default-case */ import type { AlignType, BuildInPlacements } from '@rc-component/trigger'; + import { getArrowOffset } from '../style/placementArrow'; export interface AdjustOverflow { @@ -155,6 +156,7 @@ export default function getPlacements(config: PlacementsConfig) { const placementInfo = { ...template, offset: [0, 0], + dynamicInset: true, }; placementMap[key] = placementInfo; diff --git a/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap b/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap index 555eea9dc3..5dc3208932 100644 --- a/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Popconfirm rtl render component should be rendered correctly in RTL dir exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
=> { @@ -11,9 +12,7 @@ const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record
+ - + - +
-
+
- + - + - +
-
+
- + - + - +
-
+
- + - + - +
diff --git a/package.json b/package.json index 910d13890d..0f9fa88a6f 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "@rc-component/color-picker": "~1.4.1", "@rc-component/mutate-observer": "^1.1.0", "@rc-component/tour": "~1.10.0", - "@rc-component/trigger": "^1.15.6", + "@rc-component/trigger": "^1.16.0", "classnames": "^2.2.6", "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1", From 6901513ff592780654d79544f21e7c643870094f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Thu, 21 Sep 2023 11:47:52 +0800 Subject: [PATCH 6/8] docs: timer-picker remove clearIcon from document (#44977) * docs: timer-picker remove clearIcon from document * docs: select remove clearIcon from document --- components/select/index.en-US.md | 3 +-- components/select/index.zh-CN.md | 7 +++---- components/time-picker/index.en-US.md | 1 - components/time-picker/index.zh-CN.md | 1 - 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index ec0a8854cb..17afe348b6 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -56,11 +56,10 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowClear | Show clear button | boolean | false | | +| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type | | autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | | | autoFocus | Get focus by default | boolean | false | | | bordered | Whether has border style | boolean | true | | -| clearIcon | The custom clear icon | ReactNode | - | | | defaultActiveFirstOption | Whether active first option by default | boolean | true | | | defaultOpen | Initial open state of dropdown | boolean | - | | | defaultValue | Initial selected option | string \| string\[] \|
number \| number\[] \|
LabeledValue \| LabeledValue\[] | - | | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 023d2d4704..9537d61c62 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -56,12 +56,11 @@ demo: ### Select props | 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| allowClear | 支持清除 | boolean | false | | +| --- | --- | --- | --- | --- | --- | +| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 | | autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true | | | autoFocus | 默认获取焦点 | boolean | false | | -| bordered | 是否有边框 | boolean | true | | -| clearIcon | 自定义的多选框清空图标 | ReactNode | - | | +| bordered | 是否有边框 | boolean | true | | | | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | | | defaultOpen | 是否默认展开下拉菜单 | boolean | - | | | defaultValue | 指定默认选中的条目 | string \| string\[] \|
number \| number\[] \|
LabeledValue \| LabeledValue\[] | - | | diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 787691d522..9cb14785c1 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -55,7 +55,6 @@ dayjs.extend(customParseFormat) | cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 | | className | The className of picker | string | - | | -| clearIcon | The custom clear icon | ReactNode | - | | | defaultValue | To set default time | [dayjs](http://day.js.org/) | - | | | disabled | Determine whether the TimePicker is disabled | boolean | false | | | disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 4.19.0 | diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index a89a479538..35d43afd63 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -55,7 +55,6 @@ dayjs.extend(customParseFormat) | cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 | | className | 选择器类名 | string | - | | -| clearIcon | 自定义的清除图标 | ReactNode | - | | | defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - | | | disabled | 禁用全部操作 | boolean | false | | | disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 4.19.0 | From 65564fccdccb03b7112d2f21abeff6c594c8b683 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: Thu, 21 Sep 2023 13:46:31 +0800 Subject: [PATCH 7/8] refactor: rm radiusBase (#44980) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: rm radiusBase * test: update test case --------- Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> --- components/theme/__tests__/token.test.tsx | 2 +- components/theme/themes/shared/genRadius.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/theme/__tests__/token.test.tsx b/components/theme/__tests__/token.test.tsx index f2d86fcdbe..b7ec4e8afa 100644 --- a/components/theme/__tests__/token.test.tsx +++ b/components/theme/__tests__/token.test.tsx @@ -148,7 +148,7 @@ describe('Theme', () => { borderRadiusOuter: 6, }, 20: { - borderRadius: 16, + borderRadius: 20, borderRadiusLG: 16, borderRadiusSM: 8, borderRadiusXS: 2, diff --git a/components/theme/themes/shared/genRadius.ts b/components/theme/themes/shared/genRadius.ts index 301a8c33fc..0bac4c9887 100644 --- a/components/theme/themes/shared/genRadius.ts +++ b/components/theme/themes/shared/genRadius.ts @@ -48,7 +48,7 @@ const genRadius = ( } return { - borderRadius: radiusBase > 16 ? 16 : radiusBase, + borderRadius: radiusBase, borderRadiusXS: radiusXS, borderRadiusSM: radiusSM, borderRadiusLG: radiusLG, From ef03563334c820d56cd04c516d36428a4bccd14e 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: Thu, 21 Sep 2023 16:37:54 +0800 Subject: [PATCH 8/8] test: update snapshot (#44989) * test: update snapshot * test: update snapshot * test: fix test logic --- .../__tests__/__snapshots__/components.test.tsx.snap | 1 + .../__tests__/__snapshots__/demo-extend.test.ts.snap | 1 + .../form/__tests__/__snapshots__/demo.test.tsx.snap | 1 + .../form/__tests__/__snapshots__/index.test.tsx.snap | 1 + components/form/__tests__/index.test.tsx | 9 +++++---- 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 059dbe399c..fa99455108 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -42316,6 +42316,7 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] = > diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 213d583d94..8213f5253c 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5464,6 +5464,7 @@ Array [ > diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 7049d8a168..7963fff0fb 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -2899,6 +2899,7 @@ Array [ > diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap index a4d9358f53..a4d1701ebc 100644 --- a/components/form/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/index.test.tsx.snap @@ -940,6 +940,7 @@ exports[`Form form should support disabled 1`] = ` > diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index c4fdf84577..d9e7552d22 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1715,20 +1715,21 @@ describe('Form', () => { const App2 = () =>
{renderComps()}
; const wrapper2 = render(); - // 时间范围组件中会有两个 input 框，因此虽然上述只有 18 个组件，但，实际有 19 个 带有 disabled 属性的表单组件 - expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(19); + // 时间范围组件中会有两个 input 框，Upload 为叠加 + // 因此虽然上述只有 18 个组件，但实际有 20 个 带有 disabled 属性的表单组件 + expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(20); const App3 = () =>
{renderComps(true)}
; const wrapper3 = render(); - expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(19); + expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(20); const App4 = () =>
{renderComps(true)}
; const wrapper4 = render(); - expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(19); + expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(20); const App5 = () =>
{renderComps()}
;