From cd5a81f75256f34df4f15c38f9a40044e5152dfa Mon Sep 17 00:00:00 2001 From: CodeCompilerConduct Date: Thu, 20 Jun 2024 12:41:39 +0930 Subject: [PATCH 01/16] docs: Update docs/spec/research-*.en-US.md (#49510) * Update research-empty.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-exception.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-form.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-list.en-US.md Signed-off-by: CodeCompilerConduct * Update research-navigation.en-US.md Additional links to recommended external articles Signed-off-by: CodeCompilerConduct * Update research-navigation.en-US.md Signed-off-by: CodeCompilerConduct * Update research-overview.en-US.md Signed-off-by: CodeCompilerConduct * Update research-result.en-US.md Signed-off-by: CodeCompilerConduct * Update research-workbench.en-US.md Signed-off-by: CodeCompilerConduct --------- Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> Signed-off-by: CodeCompilerConduct --- docs/spec/research-empty.en-US.md | 80 ++++++- docs/spec/research-exception.en-US.md | 135 +++++++++++ docs/spec/research-form.en-US.md | 262 +++++++++++++++++++++ docs/spec/research-list.en-US.md | 127 ++++++++++ docs/spec/research-navigation.en-US.md | 314 ++++++++++++++++++++++++- docs/spec/research-overview.en-US.md | 4 +- docs/spec/research-result.en-US.md | 132 +++++++++++ docs/spec/research-workbench.en-US.md | 102 ++++++++ 8 files changed, 1153 insertions(+), 3 deletions(-) diff --git a/docs/spec/research-empty.en-US.md b/docs/spec/research-empty.en-US.md index f5c5729811..3e74b276b3 100644 --- a/docs/spec/research-empty.en-US.md +++ b/docs/spec/research-empty.en-US.md @@ -6,4 +6,82 @@ title: Empty Status skip: true --- -设计模式 - 探索 - 全局规则 - 空状态 +## Design Goals + +- The empty state should provide a prompt to help users understand the reason for the empty state, avoiding confusion and misunderstanding; + +- Provide recommended action tips to help users get out of the empty state. + +--- + +## Design Principles + +
+
+ +
+

Clarity

+

Inform users of the specific reason for the empty state through clear language, illustrations, etc.

+
+
+
+ +
+

Provide Invitation

+

Provide help text, suggested actions, and other solutions to indicate what can be done on the next screen, guiding users to take action.

+
+
+
+ +### Do & Don’t + + +Correct Example +Incorrect Example + + +--- + +## Use Cases + +### New User Guidance + + + + + +Generally, new users expect empty states to have explanatory notes and recommended actions. Empty states are very useful in scenarios of first-time use of an application or feature, as they show the functionality and process to users and help them get started quickly. To assist new users in their first use, the empty state can be filled with feature guides, help documents, etc. + +#### Using Guide Variations + + + + + +The guide consists of three parts: state prompt, help guide, and suggested actions. During design, you can choose modules based on the business process to form the page and variations. For empty state pages within a complex process, you can also provide process guide modules to help users understand the operation process globally, and provide text buttons for quick operations related to the process. + +### Completion or Clearance + + + + + +This empty state occurs when users voluntarily delete data from the feature. For example, customers have completed all items on their task list or read all notifications. Generally, this type of scenario does not require action guidance, just use graphical elements or prompt information to explain the empty state. + +### No Data + + + + + +The scenario of no data in the content area is displayed with a combination of graphical elements, prompt information, and suggested actions. Whether to provide suggested actions depends on the use case. + +--- + +## Further Reading + +### External Reference Articles + +- [Salesforce Empty State Design Guidelines](https://www.lightningdesignsystem.com/guidelines/empty-state/#Message) +- [PREDIX Empty State Design Guidelines](https://www.predix-ui.com/#/design/communication/empty-states) +- [Material Design Empty State Design Guidelines](https://material.io/design/communication/empty-states.html#content) diff --git a/docs/spec/research-exception.en-US.md b/docs/spec/research-exception.en-US.md index da93f1485c..a049b24aff 100644 --- a/docs/spec/research-exception.en-US.md +++ b/docs/spec/research-exception.en-US.md @@ -5,3 +5,138 @@ order: 5 title: Exception Page skip: true --- + +For displaying page error states. + +## Design Goals + +Explain what went wrong, provide appropriate suggestions or actions to the user, and avoid confusion and disorientation. + +--- + +## Design Principles + +
+
+ +
+

Friendly

+

Use friendly, clear language to express, avoiding confusing terms that might bewilder the user.

+
+
+
+ +
+

Provide Invitation

+

Guide users to the next level of interaction with reminders and hints, indicating what can be done on the next screen.

+
+
+
+ +--- + +## Types + +### Error Page + + + + + +Displayed when a page encounters an error, it includes the following elements: + +1. Illustration: Add a bit of fun to the heavy error, easing user frustration; +2. Error Code/Issue: Display specific HTTP error codes if available; +3. Error Description: Briefly describe the error cause, making it easier for users to report the issue; +4. Suggested Actions: Help users deal with the error or guide them back on the right path. + +#### Template - 404 + + + + + +**When to Use** + +When the page, item, resource, etc., the user requested is not found. + +#### Template - 403 + + + + + +**When to Use** + +No permission, which might include no application or data permissions, depending on the situation. + +#### Template - 500 + + + + + +**When to Use** + +When the server encounters an error and cannot provide service to the user. + +#### Template - Browser Incompatibility + + + + + +**When to Use** + +When the browser is incompatible, preventing users from opening the webpage. + +
+ + + + + +**Design Recommendations** + +When the browser is incompatible, affecting the operation to different extents, use global prompts if it does not seriously impact usage, allowing users to continue. + +### Empty State + +Displayed when there is no content/data to show to the user. An empty state is also a specific type of error page. For detailed content, please refer to the [Empty State](/docs/spec/research-empty) document. + +### Load Failure + + + + + +**When to Use** + +Displayed when a page fails to load content due to various reasons such as network issues, generally combined with retry options. + +### Design Recommendations + +The overall interaction flow of a page may consist of different states. Designers should not only focus on the ideal state but also consider various unexpected scenarios comprehensively, preventing interruptions in the user experience. + +- Ideal State: The state where all page modules are displayed normally; + +- Partial State: Some modules are missing or some content is in an empty state, refer to the design of [Empty State](/docs/spec/research-empty); + +- Loading State: Use Spin or Skeleton to indicate the loading state; + +- Error State: System errors, no permissions, etc.; + +- Empty State: The state where the content is completely empty, it is recommended to use guide-like [Empty State](/docs/spec/research-empty) prompts. For new users, refer to the new user guide page. + +--- + +## Further Reading + +### Related Template Documents + +- [Empty State](/docs/spec/research-empty) + +### External Reference + +- [Avoid Being Embarrassed by Your Error Messages](https://www.uxmatters.com/mt/archives/2010/08/avoid-being-embarrassed-by-your-error-messages.php) +- [How to fix a bad user interface](https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/#partial) diff --git a/docs/spec/research-form.en-US.md b/docs/spec/research-form.en-US.md index 23dd758dab..c1b456ca35 100644 --- a/docs/spec/research-form.en-US.md +++ b/docs/spec/research-form.en-US.md @@ -5,3 +5,265 @@ order: 1 title: Form Page skip: true --- + +A form page is a type of page used for information addition and entry. It ensures that users enter information according to requirements and submit it for system use or guide users in application settings. + +## Design Goals + +Help users clearly understand the current page tasks, quickly find and locate modification targets, easily and accurately understand the meaning and effects of form items, while simplifying the filling process, ensuring that users can complete tasks accurately, easily, and quickly. + +## Design Principles + +
+
+ +
+

Efficient

+

Use reasonable information organization and form components to enable users to quickly complete form page tasks.

+
+
+
+ +
+

Clear

+
1. Quickly locate important information and target options;
+
2. Titles, options, and prompts accurately convey meanings;
+
3. Allow users to perceive the cause and effect of different operations and respond promptly with relevant feedback.
+
+
+
+ +
+

Security

+

Reasonable mechanisms to ensure the consequences of operations, such as providing distributed or instant save mechanisms for complex forms; offering regret and quick fix functions like return, reset, cancel, clear, and undo for different scenario tasks.

+
+
+
+ +### Do & Don’t + +When organizing and presenting form items on the form page, pay attention to concise expression, efficiency, and accuracy to avoid increasing the cost of user input. + + +Incorrect Example + + +Do not use different components or presentation forms for the same type of content in a form page, as it increases the user's comprehension cost. + +
+ + +Correct Example +Incorrect Example + + +The titles and prompts of form items should not use incomprehensible words or be too long, causing high comprehension costs. If uncommon words are unavoidable, use auxiliary elements like help descriptions. + +
+ + +Incorrect Example + + +Avoid filling hints with redundant correct statements, e.g., an input hint for a form item called "Name" is "Please enter your name." + +
+ +## How to Design + +Form page templates focus on the experience of submitting a single form. According to the task complexity, four layout solutions are provided: + +- Normal Layout +- Task Decomposition and Arrangement +- Specific Scenarios + +### Normal Layout + +Lay out all the information that needs to be filled in. Suitable for forms with few content items that cannot be grouped by relevance. + +#### Template - Basic Form + + + + + +**When to Use** + +When a simple and quick task needs to be completed, e.g., creating with minimal information input. + +### Task Decomposition and Arrangement + +Decompose large, complex tasks into multiple parts and group them by relevance to reduce user input burden. Although each part is handled individually, they are ultimately submitted together. Suitable for large, complex forms. Proper task segmentation can reduce user error rates. + +#### Template - Basic Step Form + + + + + +**When to Use** + +Organize the information users need to fill and confirm in a linear process, using step bars to inform users of the complete process and progress. Often, users are asked to confirm the information again before the final submission, and clear feedback is provided at the end of the process. Suitable for tasks with clear linear logic. + +#### Template - Grouped Form + + + + + +**When to Use** + +When the form page requires a lot of content to be filled in a single task, and different content can be classified and summarized. + +#### Template - Editable List (In Development) + +**When to Use** + + + + + +Dynamic Increase/Decrease: Recommended when the number of form items ≤3, and each input box does not require a separate title. + +
+ + + + + +Editable Table: Recommended when the number of form items is between 2 and 5, so each row of content can be fully displayed. + +
+ + + + + +Collapsible Panel Editing: Recommended when the number of form items is between 6 and 8. + +
+ + + + + +Drawer Editing: Recommended when the number of form items is >8. + +
+ + + + + +Rule Tree: Applied in rule editing scenarios. + +Suitable for pages that need to add one or more objects, and each object requires multiple groups of data to be added or edited. + +### Specific Scenario Templates + +#### Template - Settings + + + + + +**When to Use** + +Personal profiles, application configuration, and other settings pages are infrequently used. Generally, users will not frequently modify them after operation. + +**Usage Suggestions** + +Choose one setting mode per page: + +> - Instant Effect Mode: Changes take effect immediately when users modify options; +> - Submission Effect Mode: Use submission effect mode when there are interdependencies among settings items. + +Determine whether to group according to the number of settings items: + +> - Number <7, grouping is not recommended; +> - Number 7~15, grouping is recommended; +> - Number >15, tab grouping is recommended. + +#### [Template - Login](https://preview.pro.ant.design/user/login) + + + + + +Ant Design standard login template + +#### [Template - Register](https://preview.pro.ant.design/user/register) + + + + + +Ant Design standard registration template + +## Design Suggestions + +### Preparation + +- The core of a form page consists of form items. It is recommended to familiarize yourself with the [basic rules of forms](/components/form/) before designing; +- Organize the information types involved in the user's current information entry tasks, and determine the components to be used according to the [Ant Design data entry rules](/docs/spec/data-entry/). + +### Layout Methods + +In a single form page, reasonable layout should be made according to the amount of content to balance page display and user efficiency. Form page layout can be divided into four gradients from simple to complex, and each gradient is compatible with the previous layout method. + +#### Basic Layout + + + + + +Arrange all the information to be filled out from top to bottom in a single column within one area, guiding users to read vertically. According to [research](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php), this is the most efficient layout method for task completion. + +#### Weak Grouping + + + + + + +Incorrect Example + + +When space is limited, form items with shorter widths and relevant content can be grouped into one line, suggesting grouping. + +#### In-Area Grouping + + + + + +When there is a lot of content in one area that can be categorized, in-area grouping can be achieved by distinguishing titles. + +#### Card Grouping + + + + + +When there is a lot of content on a page (usually more than two screens) that can be categorized, card grouping can be used to carry it. Each card needs to include a large title. + +#### Determine Layout Method + + + + + +The determination of which layout method to use is similar to the [Detail Page](/docs/spec/detail-page#%E8%AE%BE%E8%AE%A1%E5%BB%BA%E8%AE%AE), and should be sorted out from the two dimensions of information complexity and relevance. Then choose the appropriate template to quickly build the page. + +
+ +## Further Reading + +### Which Modules or Components to Use + +- [Form](/components/form-cn#header) +- [Steps](/components/steps-cn#header) + +### External Reference + +- [Label Placement in Forms](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php) diff --git a/docs/spec/research-list.en-US.md b/docs/spec/research-list.en-US.md index 15a8496110..2f6a00a81c 100644 --- a/docs/spec/research-list.en-US.md +++ b/docs/spec/research-list.en-US.md @@ -5,3 +5,130 @@ order: 3 title: List Page skip: true --- + +A list page allows viewing and handling a large number of entries, often with navigation to detailed pages. Users can filter, compare, add, analyze entries, and drill down to complete detail pages from the list page. + +--- + +## Design Goals + +Help users view, handle, and find entries more efficiently. + +## Design Principles + +
+
+ +
+

Scannability

+

Use a consistent format to highlight key information that aids in object recognition. Utilize rich interactive layered information to reduce cognitive load.

+
+
+
+ +
+

Findability

+

Organize lists in a logically browsable order. Provide suitable search components to help users quickly find information.

+
+
+
+ +## How to Design + +### Basic Layout + +#### Single Column Layout + + + + + +Stack from top to bottom, with the data filtering module at the top. After filtering the data, users can browse and analyze from the general to the specific. + +#### Two-Column Layout + + + + + +Place the data filtering module in the sidebar when there are many filtering conditions and ample horizontal space. + +#### [Template - Query Table](https://preview.pro.ant.design/list/table-list) + + + + + +**When to Use** + +When each entry needs to expose many fields; use when users have an accurate query scope when searching for entries. + +#### Template - Standard List + + + + + +**When to Use** + +Provide an overview of each entry, with navigation to entry details by clicking the list. The page often provides statistical functions for users to understand the overall progress. It can be used as a simplified version of a workbench. + +#### [Template - Card List](https://preview.pro.ant.design/list/card-list) + + + + + +**When to Use** + +When users do not need to browse entries in a specific order, present each entry attractively. + +#### Template - Search List + + + + + +**When to Use** + +Primarily used for searching specific entry information, search results across many topics using keywords. Suitable for searching and filtering a large number of different types of content, meeting the needs of finding vague targets. + +**Involves Operations** + +Filter, search + +#### Template - Member Management + + + + + +**When to Use** + +Member management is used to display and manage the basic information and permissions of members within an object. Management operations usually include adding members, deleting members, assigning member roles and permissions, etc. + +**Involves Operations** + +Filter, delete, etc. + +## Design Suggestions + +#### Batch Operations + + + + + +Page-level batch operations affect the entire page and can be placed at the bottom of the page. + +## Further Reading + +#### External Reference Articles + +- [Canvas Filters](https://canvas.hubspot.com/patterns/filters) +- [Canvas Search](https://canvas.hubspot.com/patterns/search) +- [Fiori Analytical List Page](https://experience.sap.com/fiori-design-web/analytical-list-page/) +- [QuickBook Table Design Rules](https://designsystem.quickbooks.com/component/tables/) +- [Article: Data Table Design](https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64) +- [Article: Designing Tables for Reusability](https://uxdesign.cc/designing-tables-for-reusability-490a3760533) +- [Article: Affordances in Design](http://www.woshipm.com/pd/1479.html) diff --git a/docs/spec/research-navigation.en-US.md b/docs/spec/research-navigation.en-US.md index c21f52e3bc..8a211e7557 100644 --- a/docs/spec/research-navigation.en-US.md +++ b/docs/spec/research-navigation.en-US.md @@ -6,4 +6,316 @@ title: Navigation skip: true --- -设计模式 - 探索 - 全局规则 - 导航 +Navigation is used to display where the user is in the current product and where they can go. + +## Design Goals + +Make users clearly aware of their current position in the product and conveniently and quickly take them to where they want to go. + +--- + +## Design Principles + +
+
+ +
+

Findability

+

Users can locate the information they want.

+
+
+
+ +
+

Efficiency

+

1. Multiple entry points: Provide multiple links to the same destination;

+

2. Shortcuts: Provide shortcuts to access content, such as related links;

+

3. Escape hatch: Click the logo to return to the homepage and restart the information search.

+
+
+
+ +--- + +## Design Suggestions + +### Information Architecture + +• Keep the information architecture hierarchy shallow, flat, and wide as much as possible during design; + +• Consider navigation from the user's usage path rather than just based on the hierarchical structure; + +• Common organizational methods include: + +1. By topic, such as the services or content categories provided by the product, which directly presents the site's content scope; + +2. By audience, such as administrators, operators, users; + +3. By task, such as understanding cooperation models, contacting cooperation specialists, signing process, cooperation coordination, business operation, customer service. + +### Navigation Paths + +A complete navigation should allow users to move along multiple paths: + +
+ +
+ +**A - Lateral Move**: Jump to the same level + +**B - Drill Down**: Enter lower-level content + +**C - Return**: Browse back through history or higher-level content + +**D - Associative Navigation**: Navigate to content based on relevance + +--- + +## Types + + + + + +Correct understanding and use of navigation components are crucial to the overall product experience. + +We divide navigation into the following 5 types: + +1. Global Navigation + +2. Back Navigation + +3. In-Page Navigation + +4. Drill Down Navigation + +5. Associative Navigation + +### Global Navigation + +Global navigation reflects the core organizational structure of the website. + +
+ +
+ +#### Sidebar Navigation + + + + + +- Used when there are many menus, recommended for more than 6 menu items; + +- Can carry multiple levels, but 1-3 levels are recommended; + +- Enterprise products are recommended to use sidebar navigation, which has better visibility and is easier to scan. The importance of each menu is less affected by the menu order. + +#### Top Navigation + + + + + +- The weight of each menu is often positively correlated with the order, meaning the order affects the frequency of user use; + +- Recommended for 2~7 content items; + +- Recommended for 1-2 levels; when more than 2 levels, pop-up navigation is recommended. + +#### Pop-Up Navigation + + +Correct Example +Incorrect Example + + +Used to expand the navigation bearing level, suitable for large websites. + +Sitemap-style navigation allows users to see the available functions of the entire site at a glance. + +1. Do not make users follow a narrow hover path to get navigation menus; + +2. Do not make users open each layer of the menu step by step to find, inefficient and difficult; + +> This suggestion is only for navigation menus, not for operational menus. + +#### Utility Navigation + + + + + +Usually placed in the upper right corner of the website, it is a habitual usage. Users are used to finding these contents in this position. + +Content usually includes: + +• Global search + +• Notification center + +• Site help + +• Customer service information, shopping cart + +• Favorites + +• Login tools + +• Language switch + + +Incorrect Example + + +**Do not place in-page operations in utility tools.** + +### Subsite Navigation + +Enterprise products often adopt a mixed structure of hierarchy + database in information architecture. This structure usually has deep layers. To achieve a shallow, flat, and wide perception level for users, organize several deep layers into a subsite to reduce the number of levels in a single site and reduce user cognitive load. + +Another subsite scenario is to face complex tasks that require a large workspace and handle tasks immersively as a subsite. The most common is the editor. In subsite mode, there is a low demand for full-site navigation functions, usually only needing to provide an exit to return to the upper level or homepage. + +> Here, the database is a form of information architecture where the content of each page is independent but follows a consistent format. + + + + + +#### Immersive Navigation + + + + + +Used to handle complex tasks or those requiring a large workspace. + +#### Multilevel Site Navigation + + + + + +- Used for subsites with many menus; + +- Subsite design should be significantly different from full-site navigation, requiring a significant transition to indicate entering a new space. + +### In-Page Navigation + +For content navigation at lower levels of the information architecture, use in-page navigation. If the page needs to be shared with others, add a location mark in the URL. + +#### Page Header + + + + + +The page header is located above the page content, mainly for declaring the page theme, in-page information navigation, and page-level content operations. + +#### Tree Control + + + + + +Displays a multi-level structure within the page. + +#### Anchor + + + + + +Jumps between various page sections, used when the content displayed in a flat layout is too long. + +#### Back to Top + + + + + +Quickly returns to the top of the page. + +#### Carousel + + + + + +Cycles through a series of content. + +### Drill Down Navigation + +Click to enter the lower-level content of the information architecture. Defaults to in-site navigation; opens a new tab for external sites. A typical scenario is drilling down from a list to details. + +### Back Navigation + +#### Breadcrumbs + + + + + +Reflects the current page's position within the website structure. When there are fewer than three levels, there is no need to display breadcrumbs, as the global navigation can directly present the location. Users can return to the previous page through breadcrumbs. + +#### Back Button + + + + + +**Titles typically appear alongside breadcrumbs. When breadcrumbs are present, back buttons in titles are not recommended.** + +The back button in the page header is equivalent to a short breadcrumb, used to return to the previous level. It is suitable for subsite scenarios where full-site navigation is hidden, and users need to return to the upper level through the back button. + +### Associative Navigation + +#### Step Bar + + + + + +Guides users step by step according to a predefined sequence. + +Displays the step bar on each page of a series of pages, marking the current page's position on this linear path. + +Suitable for: + +• Linear user visit paths; + +• Step bars break down complex tasks into easy-to-handle small tasks, reducing user errors and completing tasks faster. + +#### Previous/Next + + + + + +Helps us move to other closely related web pages. + +--- + +## How to Validate Design Results + +To test the quality of the navigation system, conduct a stress test: parachute into the site, testing the navigation system's limits. + +1. Ignore the homepage and go directly to a random page on the site; + +2. Check if users can know their current position and its relation to other parts of the site. Which part of the site is this? What is the upper-level page? + +3. Do they know where this page will take them? Does the link text explain the destination? + +--- + +## Further Reading + +### External Reference Articles + +- [Alibaba Cloud - Console Navigation System](https://xconsole.aliyun-inc.com/spec/hxzewz) +- [Material Design Navigation](https://material.io/design/navigation/understanding-navigation.html#) +- [Predix Navigation](https://www.predix-ui.com/#/design/foundation/navigation) +- [Windows - UWP Navigation Design Basics](https://docs.microsoft.com/zh-cn/windows/uwp/design/basics/navigation-basics) +- [When You Should Use a Breadcrumb Navigation?](https://uxmovement.com/navigation/when-you-should-use-a-breadcrumb-navigation/) +- [Books: "Information Architecture for the World Wide Web" - Navigation Systems](https://www.oreilly.com/library/view/information-architecture-for/0596527349) +- [Books: "Designing Web Navigation"](https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/) diff --git a/docs/spec/research-overview.en-US.md b/docs/spec/research-overview.en-US.md index b33a448138..91ac1d25b7 100644 --- a/docs/spec/research-overview.en-US.md +++ b/docs/spec/research-overview.en-US.md @@ -7,4 +7,6 @@ title: Overview skip: true --- -设计模式-探索：概览 +In the Exploration channel, we will publicly share the design patterns we are researching and improving, as well as unfinished content. Most of the content can be built using existing antd components. Of course, there may be a small number of new components that have not yet been developed. The original intention of opening the Exploration channel is to improve Ant Design together with users. If you are using this content, your feedback can help us optimize and iterate faster, and promote components to enter the development state as soon as possible. + +[Feedback](https://www.yuque.com/antdesign/topics) | [Alibaba Internal Feedback](https://yuque.antfin-inc.com/ui-assets/topics) diff --git a/docs/spec/research-result.en-US.md b/docs/spec/research-result.en-US.md index 12b35b117a..a2eaf26894 100644 --- a/docs/spec/research-result.en-US.md +++ b/docs/spec/research-result.en-US.md @@ -5,3 +5,135 @@ order: 4 title: Result Page skip: true --- + +A result page is a page that provides feedback on the outcome of an operation. It is the strongest form of feedback mode. + +## When to Use + +When an operation process is completed and clear feedback is needed for the user, such as the final step of a step form.
When a large amount of information needs to be displayed on the result page. + +## Design Goals + +Convey the task completion result to the user, guide the user to the next operation, and establish the user's trust in the system through effective feedback. + +## Design Principles + +
+
+ +
+

Use Cautiously

+

The result page is a heavy feedback method, only suitable for scenarios where strong user attention is needed, the information volume is large, and the page stays permanently. It is not recommended for other scenarios.

+
+
+
+ +
+

End Instantly

+

When the result status is successful, it can automatically jump after a few seconds (3-5 seconds is recommended).

+
+
+
+ +
+

Simplify Information

+

The information on the result page should be the result triggered by the submission action, such as validation should be completed in the form. The information on the result page should be concise, only displaying result-related content. Additional information can be added for special scenarios.

+
+
+
+ +## Design Suggestions + + +Correct Example +Incorrect Example + + + +Correct Example +Incorrect Example + + +The title should be constructed as "Object + Action + Result/Status" or "Action + Result/Status". + +
+ + +Correct Example +Incorrect Example + + +It is recommended to limit the guidance operations to no more than 2 items, as too many operations can cause confusion for users. + +
+ + +Correct Example + + +For lighter feedback, it is not recommended to use a result page. Use global tips, warning tips, notification boxes, etc. Refer to feedback design guidelines for details. + +
+ + +Correct Example + + +If the result status is successful, inform the user that it will automatically jump after a few seconds on the main button. + +## How to Design + +### Basic Layout + + + + + +The result page can provide the following content: + +1. Result Feedback: Clearly inform the user of the submission result; + +2. Result Explanation (optional): Used for brief explanations of the result if needed; + +3. Suggested Actions: Guide the user to continue with subsequent tasks; + +4. Additional Information (optional): Provide supplementary information to the user along with the result; marketing modules. + +#### Template - Basic Result Page + + + + + +Displays the result status and guides the user to the next operation. + +#### Template - Complex Result Page + + + + + +In addition to basic information like result status and guidance operations, it also displays related recommendations, process progress, error details, etc. + +#### Additional Information Types + + + + + +## Further Reading + +### Relevant Global Rules + +- [Feedback](/docs/spec/research-message-and-feedback) + +### Relevant Modules or Components + +- [Form Page](/components/form-cn/) + +### External Reference Articles + +- [Fiori Message Feedback Component Rules](https://experience.sap.com/fiori-design-web/message-box/) +- [Aliyun Result Page Design](https://xconsole.aliyun-inc.com/scenes/resultpage) +- [CANVAS Message Feedback Component Rules](https://canvas.hubspot.com/components/alerts-messaging) +- [PREDIX Notification and Alert Component Rules](https://www.predix-ui.com/#/design/communication/notifications) diff --git a/docs/spec/research-workbench.en-US.md b/docs/spec/research-workbench.en-US.md index 1843717386..9cd87ff34b 100644 --- a/docs/spec/research-workbench.en-US.md +++ b/docs/spec/research-workbench.en-US.md @@ -5,3 +5,105 @@ order: 2 title: Workbench skip: true --- + +The workbench is often used as the homepage of an application, providing a convenient hub for users. It offers common information entry points, navigating to various functional modules of the application in a hub-and-spoke manner; it presents information that the user currently needs to focus on, shortening the path to key information; and allows users to directly perform some high-frequency tasks on the workbench. + +--- + +## Design Goals + +User-side: Provide shortcuts for handling and viewing information and necessary help for users;
Product-side: Communicate better with users, appropriately promote new trends and operational content of the product. + +## Design Principles + +
+
+ +
+

Findability

+

Can users locate the information they want?

+
+
+
+ +
+

Reduce Memory Load

+

Understand the core goals of users returning to the site and provide the shortest navigation paths to possible destinations.

+
+
+
+ +## How to Design + +#### Template - Workbench + + + + + +**When to Use** + +- Shorten the navigation path for users returning to the site; +- Provide common navigation entry points for users. + +**Involved Functions** + +Help; Core Data; Shortcuts; To-Do List; Focus; Operational Modules. + +**Design Suggestions** + +- Display modules related to daily work, keeping the total number of modules between 5-9; +- Present the most frequently used content on the first screen whenever possible; +- Provide role-based differentiated views. + +#### Template - New User Guide + + + + + +**When to Use** + +- When new users arrive at the platform and have not yet started any work, shorten the learning time for new users; +- When some modules have no content, refer to the "Empty State" guidelines. + +**Involved Functions** + +Help; Empty State Guide. + +**Design Suggestions** + +- Introduce the platform's purpose to users and guide them to start working; +- If users need to manage complex objects, provide a Demo preview entry; + +### Design Suggestions + +#### Choose the Right Navigation Method + +This type of page generally provides two types of navigation forms.
+ +① Users know the function they want to use and need to navigate to it. For example: + +
+ +
+ +② Discovery navigation, where users need to complete a task but do not know which function to use. For example: + +
+ +
+ +#### Arrange Content by Usage Frequency + + + + + +Arrange the content based on usage frequency in the daily work. + +#### Consider Error States + +See Error Page + +> Additionally, whether to recommend personalized customization for users is still under exploration. From b0bc32c96222ee00b5199847fcda792fe5f48866 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 20 Jun 2024 11:32:11 +0800 Subject: [PATCH 02/16] docs: Image docs imginfo update (#49517) --- components/image/index.en-US.md | 4 ++-- components/image/index.zh-CN.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 36776aea39..a500a1f938 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -66,8 +66,8 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El | maxScale | Max scale | number | 50 | 5.7.0 | | closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 | | forceRender | Force render preview dialog | boolean | - | - | -| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | -| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 | +| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => React.ReactNode | - | 5.7.0, image: 5.18.0 | | destroyOnClose | Destroy child elements when closing preview | boolean | false | | | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - | diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index bc9c39116d..1044e9100f 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -67,8 +67,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA | maxScale | 最大放大倍数 | number | 50 | 5.7.0 | | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 | | forceRender | 强制渲染预览图 | boolean | - | - | -| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | -| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 | +| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => React.ReactNode | - | 5.7.0, image: 5.18.0 | | destroyOnClose | 关闭预览时销毁子元素 | boolean | false | | | onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - | From 3bdef4f4dc2fa33b62d2a035df0c06459ff4fd6b Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 20 Jun 2024 13:37:17 +0800 Subject: [PATCH 03/16] docs: Alert demo remove Space comp (#49515) --- .../__snapshots__/demo-extend.test.ts.snap | 2397 ++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 2397 ++++++++--------- components/alert/demo/action.tsx | 7 +- components/alert/demo/banner.tsx | 9 +- components/alert/demo/closable.tsx | 8 +- components/alert/demo/custom-icon.tsx | 14 +- components/alert/demo/description.tsx | 9 +- components/alert/demo/icon.tsx | 13 +- components/alert/demo/smooth-closed.tsx | 6 +- components/alert/demo/style.tsx | 9 +- 10 files changed, 2298 insertions(+), 2571 deletions(-) diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap index 5973c04e40..98dfcdce2f 100644 --- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,102 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = ` -
+Array [ , +
, +
, +
, + + , +] `; exports[`renders components/alert/demo/action.tsx extend context correctly 2`] = ` @@ -294,147 +278,88 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 2`] = `; exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] = ` -
+Array [ , +
, + -
-
- -
-
- -
-
- , +
, + -
+ , +
, + , +] `; exports[`renders components/alert/demo/banner.tsx extend context correctly 2`] = `[]`; @@ -484,616 +452,556 @@ exports[`renders components/alert/demo/basic.tsx extend context correctly 1`] = exports[`renders components/alert/demo/basic.tsx extend context correctly 2`] = `[]`; exports[`renders components/alert/demo/closable.tsx extend context correctly 1`] = ` -
+Array [ -
- -
-
- , +
, + -
+ +
, +
, + , +] `; exports[`renders components/alert/demo/closable.tsx extend context correctly 2`] = `[]`; exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 1`] = ` -
+Array [ +
, +
, , +
, , +
, , +
, , +
, , +
, , +
, , +
, + , +] `; exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 2`] = `[]`; exports[`renders components/alert/demo/description.tsx extend context correctly 1`] = ` -
+Array [ +
, +
, + , +
, + , +
, - + , +] `; exports[`renders components/alert/demo/description.tsx extend context correctly 2`] = `[]`; @@ -1112,166 +1020,123 @@ exports[`renders components/alert/demo/error-boundary.tsx extend context correct exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 2`] = `[]`; exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = ` -
+Array [ , +
, , +
, , +

+ click the close button to see the effect +

, + , +] `; exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 2`] = `[]`; exports[`renders components/alert/demo/style.tsx extend context correctly 1`] = ` -
+Array [ +
, +
, +
, +
, + , +
, - + , +] `; exports[`renders components/alert/demo/style.tsx extend context correctly 2`] = `[]`; diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap index 45e372512b..ef163fe1dd 100644 --- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap @@ -1,102 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders components/alert/demo/action.tsx correctly 1`] = ` -
+Array [ , +
, +
, +
, + + , +] `; exports[`renders components/alert/demo/banner.tsx correctly 1`] = ` -
+Array [ , +
, + -
-
- -
-
- -
-
- , +
, + -
+ , +
, + , +] `; exports[`renders components/alert/demo/basic.tsx correctly 1`] = ` @@ -474,612 +442,552 @@ exports[`renders components/alert/demo/basic.tsx correctly 1`] = ` `; exports[`renders components/alert/demo/closable.tsx correctly 1`] = ` -
+Array [ -
- -
-
- , +
, + -
+ +
, +
, + , +] `; exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = ` -
+Array [ +
, +
, , +
, , +
, , +
, , +
, , +
, , +
, , +
, + , +] `; exports[`renders components/alert/demo/description.tsx correctly 1`] = ` -
+Array [ +
, +
, + , +
, + , +
, - + , +] `; exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = ` @@ -1094,166 +1002,123 @@ exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = ` `; exports[`renders components/alert/demo/icon.tsx correctly 1`] = ` -
+Array [ , +
, , +
, , +

+ click the close button to see the effect +

, + , +] `; exports[`renders components/alert/demo/style.tsx correctly 1`] = ` -
+Array [ +
, +
, +
, +
, + , +
, - + , +] `; diff --git a/components/alert/demo/action.tsx b/components/alert/demo/action.tsx index 3715c1337a..823860195b 100644 --- a/components/alert/demo/action.tsx +++ b/components/alert/demo/action.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Alert, Button, Space } from 'antd'; const App: React.FC = () => ( - + <> ( } closable /> +
( } /> +
( } closable /> +
( } closable /> - + ); export default App; diff --git a/components/alert/demo/banner.tsx b/components/alert/demo/banner.tsx index 552d6ca9ee..cc8bcb6a67 100644 --- a/components/alert/demo/banner.tsx +++ b/components/alert/demo/banner.tsx @@ -1,17 +1,20 @@ import React from 'react'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const App: React.FC = () => ( - + <> +
+
+
- + ); export default App; diff --git a/components/alert/demo/closable.tsx b/components/alert/demo/closable.tsx index 4369716d8d..46b5557340 100644 --- a/components/alert/demo/closable.tsx +++ b/components/alert/demo/closable.tsx @@ -1,19 +1,20 @@ import React from 'react'; import { CloseSquareFilled } from '@ant-design/icons'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const onClose = (e: React.MouseEvent) => { console.log(e, 'I was closed.'); }; const App: React.FC = () => ( - + <> +
( closable onClose={onClose} /> +
( }} onClose={onClose} /> - + ); export default App; diff --git a/components/alert/demo/custom-icon.tsx b/components/alert/demo/custom-icon.tsx index e1767a937e..c6967e2069 100644 --- a/components/alert/demo/custom-icon.tsx +++ b/components/alert/demo/custom-icon.tsx @@ -1,16 +1,21 @@ import React from 'react'; import { SmileOutlined } from '@ant-design/icons'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const icon = ; const App: React.FC = () => ( - + <> +
+
+
+
+
( type="success" showIcon /> +
( type="info" showIcon /> +
( type="warning" showIcon /> +
( type="error" showIcon /> - + ); export default App; diff --git a/components/alert/demo/description.tsx b/components/alert/demo/description.tsx index 0abd7b08b1..4b15cb9c95 100644 --- a/components/alert/demo/description.tsx +++ b/components/alert/demo/description.tsx @@ -1,29 +1,32 @@ import React from 'react'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const App: React.FC = () => ( - + <> +
+
+
- + ); export default App; diff --git a/components/alert/demo/icon.tsx b/components/alert/demo/icon.tsx index bc9baca870..37e19b3e20 100644 --- a/components/alert/demo/icon.tsx +++ b/components/alert/demo/icon.tsx @@ -1,24 +1,30 @@ import React from 'react'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const App: React.FC = () => ( - + <> +
+
+
+
+
+
( showIcon closable /> +
- + ); export default App; diff --git a/components/alert/demo/smooth-closed.tsx b/components/alert/demo/smooth-closed.tsx index d9020eeaa6..82f5ff08f3 100644 --- a/components/alert/demo/smooth-closed.tsx +++ b/components/alert/demo/smooth-closed.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Alert, Space, Switch } from 'antd'; +import { Alert, Switch } from 'antd'; const App: React.FC = () => { const [visible, setVisible] = useState(true); @@ -9,13 +9,13 @@ const App: React.FC = () => { }; return ( - + <> {visible && ( )}

click the close button to see the effect

- + ); }; diff --git a/components/alert/demo/style.tsx b/components/alert/demo/style.tsx index f89bc3f879..82fcc683c7 100644 --- a/components/alert/demo/style.tsx +++ b/components/alert/demo/style.tsx @@ -1,13 +1,16 @@ import React from 'react'; -import { Alert, Space } from 'antd'; +import { Alert } from 'antd'; const App: React.FC = () => ( - + <> +
+
+
- + ); export default App; From 73f7b80388df02bc9b0d48d1f33880e86f5936ce Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 20 Jun 2024 14:21:08 +0800 Subject: [PATCH 04/16] docs: update zh-CN demo ref link (#49500) --- components/button/demo/multiple.md | 2 +- components/input/demo/compact-style.md | 2 +- components/list/demo/responsive.md | 2 +- components/slider/demo/input-number.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md index 7d6f419cb2..aaf5f70f24 100644 --- a/components/button/demo/multiple.md +++ b/components/button/demo/multiple.md @@ -1,6 +1,6 @@ ## zh-CN -按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。 +按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。 ## en-US diff --git a/components/input/demo/compact-style.md b/components/input/demo/compact-style.md index 71575c6ccc..424e526cb4 100644 --- a/components/input/demo/compact-style.md +++ b/components/input/demo/compact-style.md @@ -1,6 +1,6 @@ ## zh-CN -使用 `Space.Compact` 创建紧凑模式，更多请查看 [Space.Compact](/components/space#spacecompact) 文档。 +使用 `Space.Compact` 创建紧凑模式，更多请查看 [Space.Compact](/components/space-cn#spacecompact) 文档。 ## en-US diff --git a/components/list/demo/responsive.md b/components/list/demo/responsive.md index 5ab353d8a0..c5715a7040 100644 --- a/components/list/demo/responsive.md +++ b/components/list/demo/responsive.md @@ -1,6 +1,6 @@ ## zh-CN -响应式的栅格列表。尺寸与 [Layout Grid](/components/grid/#col) 保持一致。 +响应式的栅格列表。尺寸与 [Layout Grid](/components/grid-cn/#col) 保持一致。 ## en-US diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md index c137e45231..ac9b1249a3 100644 --- a/components/slider/demo/input-number.md +++ b/components/slider/demo/input-number.md @@ -1,6 +1,6 @@ ## zh-CN -和 [数字输入框](/components/input-number/) 组件保持同步。 +和 [数字输入框](/components/input-number-cn) 组件保持同步。 ## en-US From b7208603ee6abafbaf1b0ca4d6f0ac5617cc2491 Mon Sep 17 00:00:00 2001 From: duqigit <916475145@qq.com> Date: Thu, 20 Jun 2024 14:22:00 +0800 Subject: [PATCH 05/16] docs: update zh-CN demo ref link (#49501) Signed-off-by: afc163 Co-authored-by: afc163 --- components/card/index.zh-CN.md | 2 +- components/config-provider/index.en-US.md | 6 +++--- components/descriptions/index.zh-CN.md | 2 +- components/modal/index.en-US.md | 4 ++-- components/popover/index.zh-CN.md | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 53491549cd..84e6f8a9f3 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -49,7 +49,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | | | size | card 的尺寸 | `default` \| `small` | `default` | | | tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | | -| tabList | 页签标题列表 | [TabItemType](/components/tabs#tabitemtype)[] | - | | +| tabList | 页签标题列表 | [TabItemType](/components/tabs-cn#tabitemtype)[] | - | | | tabProps | [Tabs](/components/tabs-cn#tabs) | - | - | | | title | 卡片标题 | ReactNode | - | | | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | | diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 942cd4defe..f02b23233c 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -116,7 +116,7 @@ const { | rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 | | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 | +| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer#api), styles?: [DrawerProps\["styles"\]](/components/drawer#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 | | dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 | | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 | @@ -126,11 +126,11 @@ const { | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 4.2.0, allowClear: 5.15.0 | | textArea | Set TextArea common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 5.15.0 | | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| list | Set List common props | { className?: string, style?: React.CSSProperties, item?:{ classNames: [ListItemProps\["classNames"\]](/components/list-cn#listitem), styles: [ListItemProps\["styles"\]](/components/list-cn#listitem) } } | - | 5.7.0 | +| list | Set List common props | { className?: string, style?: React.CSSProperties, item?:{ classNames: [ListItemProps\["classNames"\]](/components/list#listitem), styles: [ListItemProps\["styles"\]](/components/list#listitem) } } | - | 5.7.0 | | menu | Set Menu common props | { className?: string, style?: React.CSSProperties, expandIcon?: ReactNode \| props => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 | | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 | +| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal#api), styles?: [ModalProps\["styles"\]](/components/modal#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 | | notification | Set Notification common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, `closeIcon`: 5.14.0 | | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 | | progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index 663aaed48d..7f5e0bcd3c 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -98,7 +98,7 @@ const items: DescriptionsProps['items'] = [ | contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 | | label | 内容的描述 | ReactNode | - | | | labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 | -| span | 包含列的数量 | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` | +| span | 包含列的数量 | number \| [Screens](/components/grid-cn#col) | 1 | `screens: 5.9.0` | > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。 diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index d417f06c1e..6b1e451fea 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -58,7 +58,7 @@ Common props ref：[Common props](/docs/react/common-props) | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | | | destroyOnClose | Whether to unmount child components on onClose | boolean | false | | | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 | -| footer | Footer content, set as `footer={null}` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | (OK and Cancel buttons) | renderFunction: 5.9.0 | +| footer | Footer content, set as `footer={null}` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | (OK and Cancel buttons) | renderFunction: 5.9.0 | | forceRender | Force render Modal | boolean | false | | | getContainer | The mounted node for Modal but still display at fullscreen | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | keyboard | Whether support press esc to close | boolean | true | | @@ -108,7 +108,7 @@ The items listed above are all functions, expecting a settings object as paramet | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 | | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 | | content | Content | ReactNode | - | | -| footer | Footer content, set as `footer: null` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 | +| footer | Footer content, set as `footer: null` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 | | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | icon | Custom icon | ReactNode | <ExclamationCircleFilled /> | | | keyboard | Whether support press esc to close | boolean | true | | diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 61cf1cbe64..c26156e259 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -58,4 +58,4 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。 -更多问题，请参考 [Tooltip FAQ](/components/tooltip#faq)。 +更多问题，请参考 [Tooltip FAQ](/components/tooltip-cn#faq)。 From 5e4019f90d12427255749e7e906633f61b3703bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Thu, 20 Jun 2024 15:07:32 +0800 Subject: [PATCH 06/16] chore: fix table ajax demo (#49513) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chroe: fix table ajax demo * chroe: demo * feat: deps 写法 * feat: add filters * feat: remvoe console * Update components/table/demo/ajax.tsx Signed-off-by: afc163 --------- Signed-off-by: afc163 Co-authored-by: afc163 --- components/table/demo/ajax.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/components/table/demo/ajax.tsx b/components/table/demo/ajax.tsx index c282d40585..89f14bc215 100644 --- a/components/table/demo/ajax.tsx +++ b/components/table/demo/ajax.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { Table } from 'antd'; import type { GetProp, TableProps } from 'antd'; +import { Table } from 'antd'; +import type { SorterResult } from 'antd/es/table/interface'; import qs from 'qs'; type ColumnsType = TableProps['columns']; @@ -20,8 +21,8 @@ interface DataType { interface TableParams { pagination?: TablePaginationConfig; - sortField?: string; - sortOrder?: string; + sortField?: SorterResult['field']; + sortOrder?: SorterResult['order']; filters?: Parameters>[1]; } @@ -85,13 +86,20 @@ const App: React.FC = () => { useEffect(() => { fetchData(); - }, [tableParams.pagination?.current, tableParams.pagination?.pageSize]); + }, [ + tableParams.pagination?.current, + tableParams.pagination?.pageSize, + tableParams?.sortOrder, + tableParams?.sortField, + JSON.stringify(tableParams.filters), + ]); const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter) => { setTableParams({ pagination, filters, - ...sorter, + sortOrder: Array.isArray(sorter) ? undefined : sorter.order, + sortField: Array.isArray(sorter) ? undefined : sorter.field, }); // `dataSource` is useless since `pageSize` changed From c4a258c16c845a10acee5afb620c146bc28d7771 Mon Sep 17 00:00:00 2001 From: Mateusz Wierzbicki Date: Thu, 20 Jun 2024 09:36:12 +0200 Subject: [PATCH 07/16] docs: Update resources.en-US.md (#49522) Signed-off-by: Mateusz Wierzbicki --- docs/resources.en-US.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md index 23bd3a7aab..5efbf0263f 100644 --- a/docs/resources.en-US.md +++ b/docs/resources.en-US.md @@ -41,9 +41,9 @@ Please find below some of the design resources and tools about Ant Design that w - Landing Templates - https://landing.ant.design/docs/download-cn - Official -- UI Kit for Figma +- Figma Resources - https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg - - Library of components for Desktop + - Always up-to-date Ant Design Figma resources - https://www.antforfigma.com - Figma Open Source Library - https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg From 4b08667a3f1b74ca7ce5b329337d2396ceba4cf2 Mon Sep 17 00:00:00 2001 From: RoxanneF Date: Thu, 20 Jun 2024 23:34:13 +0800 Subject: [PATCH 08/16] docs: fix progress text (#49530) --- components/progress/demo/linecap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/progress/demo/linecap.md b/components/progress/demo/linecap.md index 75e5e20d1d..bc3fde2886 100644 --- a/components/progress/demo/linecap.md +++ b/components/progress/demo/linecap.md @@ -1,6 +1,6 @@ ## zh-CN -通过设定 `strokeLinecap="butt"` 可以调整进度条边缘的形状为方形，详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap)。 +通过设定 `strokeLinecap="butt"` 可以将进度条边缘的形状从闭合的圆形的圆弧调整为断口，详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap)。 ## en-US From 666f38d75669f255635418a1ecf941553b83cd2a Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 21 Jun 2024 02:10:21 +0800 Subject: [PATCH 09/16] refactor: add ContextIsolator component (#49438) * refactor: add ContextIsolator component * fix: fix * fix: fix * test: fix test case * test: add test case --------- Co-authored-by: afc163 --- components/_util/ContextIsolator.tsx | 29 ++++++ components/_util/InputAddon.tsx | 15 --- .../_util/__tests__/ContextIsolator.test.tsx | 14 +++ components/color-picker/ColorPicker.tsx | 7 +- .../generatePicker/generateRangePicker.tsx | 7 +- .../generatePicker/generateSinglePicker.tsx | 7 +- components/drawer/index.tsx | 99 +++++++++---------- components/input-number/index.tsx | 18 +++- components/input/Input.tsx | 18 +++- components/menu/OverrideContext.tsx | 6 +- components/modal/Modal.tsx | 87 ++++++++-------- components/tooltip/index.tsx | 6 +- 12 files changed, 181 insertions(+), 132 deletions(-) create mode 100644 components/_util/ContextIsolator.tsx delete mode 100644 components/_util/InputAddon.tsx create mode 100644 components/_util/__tests__/ContextIsolator.test.tsx diff --git a/components/_util/ContextIsolator.tsx b/components/_util/ContextIsolator.tsx new file mode 100644 index 0000000000..502adcbc4f --- /dev/null +++ b/components/_util/ContextIsolator.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { NoFormStyle } from '../form/context'; +import { NoCompactStyle } from '../space/Compact'; + +const ContextIsolator: React.FC< + Readonly< + React.PropsWithChildren>> + > +> = (props) => { + const { isolateSpaceContext, isolateFormContext, children } = props; + if (children === undefined || children === null) { + return null; + } + let result: React.ReactNode = children; + if (isolateFormContext) { + result = ( + + {result} + + ); + } + if (isolateSpaceContext) { + result = {result}; + } + return result; +}; + +export default ContextIsolator; diff --git a/components/_util/InputAddon.tsx b/components/_util/InputAddon.tsx deleted file mode 100644 index 39b0447aff..0000000000 --- a/components/_util/InputAddon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -import { NoFormStyle } from '../form/context'; -import { NoCompactStyle } from '../space/Compact'; - -const getInputAddon = (addon: React.ReactNode): React.ReactNode => - addon ? ( - - - {addon} - - - ) : null; - -export default getInputAddon; diff --git a/components/_util/__tests__/ContextIsolator.test.tsx b/components/_util/__tests__/ContextIsolator.test.tsx new file mode 100644 index 0000000000..70b49f7dfe --- /dev/null +++ b/components/_util/__tests__/ContextIsolator.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { render } from '../../../tests/utils'; +import ContextIsolator from '../ContextIsolator'; + +describe('ContextIsolator component', () => { + it('ContextIsolator should work when Children is null', () => { + [undefined, null].forEach((item) => { + expect(() => { + render({item}); + }).not.toThrow(); + }); + }); +}); diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 579a419009..e4f3b2b49d 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -2,6 +2,7 @@ import React, { useContext, useMemo, useRef } from 'react'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import ContextIsolator from '../_util/ContextIsolator'; import genPurePanel from '../_util/PurePanel'; import { getStatusClassNames } from '../_util/statusUtils'; import { devUseWarning } from '../_util/warning'; @@ -10,7 +11,7 @@ import { ConfigContext } from '../config-provider/context'; import DisabledContext from '../config-provider/DisabledContext'; import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import useSize from '../config-provider/hooks/useSize'; -import { FormItemInputContext, NoFormStyle } from '../form/context'; +import { FormItemInputContext } from '../form/context'; import type { PopoverProps } from '../popover'; import Popover from '../popover'; import type { Color } from './color'; @@ -198,14 +199,14 @@ const ColorPicker: CompoundedComponent = (props) => { } }} content={ - + - + } overlayClassName={mergedPopupCls} {...popoverProps} diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index d790cb8ddc..538913d296 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -8,6 +8,7 @@ import { RangePicker as RCRangePicker } from 'rc-picker'; import type { PickerRef } from 'rc-picker'; import type { GenerateConfig } from 'rc-picker/lib/generate/index'; +import ContextIsolator from '../../_util/ContextIsolator'; import { useZIndex } from '../../_util/hooks/useZIndex'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import type { AnyObject } from '../../_util/type'; @@ -19,7 +20,7 @@ import useSize from '../../config-provider/hooks/useSize'; import { FormItemInputContext } from '../../form/context'; import useVariant from '../../form/hooks/useVariants'; import { useLocale } from '../../locale'; -import { NoCompactStyle, useCompactItemContext } from '../../space/Compact'; +import { useCompactItemContext } from '../../space/Compact'; import enUS from '../locale/en_US'; import useStyle from '../style'; import { getRangePlaceholder, transPlacement2DropdownAlign, useIcons } from '../util'; @@ -106,7 +107,7 @@ export default function generateRangePicker( const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number); return wrapCSSVar( - + separator={ @@ -167,7 +168,7 @@ export default function generateRangePicker( }} allowClear={mergedAllowClear} /> - , + , ); }); diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 14e1ec0466..08d30cc5e5 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -8,6 +8,7 @@ import type { PickerRef } from 'rc-picker'; import type { GenerateConfig } from 'rc-picker/lib/generate/index'; import type { PickerMode } from 'rc-picker/lib/interface'; +import ContextIsolator from '../../_util/ContextIsolator'; import { useZIndex } from '../../_util/hooks/useZIndex'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import type { AnyObject } from '../../_util/type'; @@ -19,7 +20,7 @@ import useSize from '../../config-provider/hooks/useSize'; import { FormItemInputContext } from '../../form/context'; import useVariant from '../../form/hooks/useVariants'; import { useLocale } from '../../locale'; -import { NoCompactStyle, useCompactItemContext } from '../../space/Compact'; +import { useCompactItemContext } from '../../space/Compact'; import enUS from '../locale/en_US'; import useStyle from '../style'; import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util'; @@ -145,7 +146,7 @@ export default function generatePicker( const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number); return wrapCSSVar( - + ref={innerRef} placeholder={getPlaceholder(locale, mergedPicker, placeholder)} @@ -205,7 +206,7 @@ export default function generatePicker( allowClear={mergedAllowClear} removeIcon={removeIcon} /> - , + , ); }); diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8587aa1bb4..e2374047be 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -5,13 +5,12 @@ import RcDrawer from 'rc-drawer'; import type { Placement } from 'rc-drawer/lib/Drawer'; import type { CSSMotionProps } from 'rc-motion'; +import ContextIsolator from '../_util/ContextIsolator'; import { useZIndex } from '../_util/hooks/useZIndex'; import { getTransitionName } from '../_util/motion'; import { devUseWarning } from '../_util/warning'; import zIndexContext from '../_util/zindexContext'; import { ConfigContext } from '../config-provider'; -import { NoFormStyle } from '../form/context'; -import { NoCompactStyle } from '../space/Compact'; import { usePanelRef } from '../watermark/context'; import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel'; import DrawerPanel from './DrawerPanel'; @@ -161,55 +160,53 @@ const Drawer: React.FC & { const { classNames: contextClassNames = {}, styles: contextStyles = {} } = drawer || {}; return wrapCSSVar( - - - - - - - - - , + + + + + + + , ); }; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 685f1f980a..83fd705789 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import type { InputNumberProps as RcInputNumberProps, ValueType } from 'rc-input-number'; import RcInputNumber from 'rc-input-number'; -import getInputAddon from '../_util/InputAddon'; +import ContextIsolator from '../_util/ContextIsolator'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import { devUseWarning } from '../_util/warning'; @@ -137,8 +137,20 @@ const InputNumber = React.forwardRef((props, controls={controlsTemp} prefix={prefix} suffix={suffixNode} - addonBefore={getInputAddon(addonBefore)} - addonAfter={getInputAddon(addonAfter)} + addonBefore={ + addonBefore && ( + + {addonBefore} + + ) + } + addonAfter={ + addonAfter && ( + + {addonAfter} + + ) + } classNames={{ input: inputNumberClass, variant: classNames( diff --git a/components/input/Input.tsx b/components/input/Input.tsx index b196d02b73..6001468f80 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -4,8 +4,8 @@ import type { InputRef, InputProps as RcInputProps } from 'rc-input'; import RcInput from 'rc-input'; import { composeRef } from 'rc-util/lib/ref'; +import ContextIsolator from '../_util/ContextIsolator'; import getAllowClear from '../_util/getAllowClear'; -import getInputAddon from '../_util/InputAddon'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import { devUseWarning } from '../_util/warning'; @@ -198,8 +198,20 @@ const Input = forwardRef((props, ref) => { input?.className, )} onChange={handleChange} - addonBefore={getInputAddon(addonBefore)} - addonAfter={getInputAddon(addonAfter)} + addonBefore={ + addonBefore && ( + + {addonBefore} + + ) + } + addonAfter={ + addonAfter && ( + + {addonAfter} + + ) + } classNames={{ ...classes, ...input?.classNames, diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index e75bbecabf..831c62b782 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { supportNodeRef, useComposeRef } from 'rc-util'; -import { NoCompactStyle } from '../space/Compact'; +import ContextIsolator from '../_util/ContextIsolator'; import type { MenuProps } from './menu'; // Used for Dropdown only @@ -43,9 +43,9 @@ export const OverrideProvider = React.forwardRef< return ( - + {canRef ? React.cloneElement(children as React.ReactElement, { ref: mergedRef }) : children} - + ); }); diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index eec2829dff..ae5ba7b636 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -3,6 +3,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; import Dialog from 'rc-dialog'; +import ContextIsolator from '../_util/ContextIsolator'; import useClosable, { pickClosable } from '../_util/hooks/useClosable'; import { useZIndex } from '../_util/hooks/useZIndex'; import { getTransitionName } from '../_util/motion'; @@ -11,9 +12,7 @@ import { devUseWarning } from '../_util/warning'; import zIndexContext from '../_util/zindexContext'; import { ConfigContext } from '../config-provider'; import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; -import { NoFormStyle } from '../form/context'; import Skeleton from '../skeleton'; -import { NoCompactStyle } from '../space/Compact'; import { usePanelRef } from '../watermark/context'; import type { ModalProps, MousePosition } from './interface'; import { Footer, renderCloseIcon } from './shared'; @@ -127,49 +126,47 @@ const Modal: React.FC = (props) => { // =========================== Render =========================== return wrapCSSVar( - - - - - {loading ? ( - - ) : ( - children - )} - - - - , + + + + {loading ? ( + + ) : ( + children + )} + + + , ); }; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 2a51986bc1..a1b64a5ea8 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -10,6 +10,7 @@ import type { import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { PresetColorType } from '../_util/colors'; +import ContextIsolator from '../_util/ContextIsolator'; import type { RenderFunction } from '../_util/getRenderPropValue'; import { useZIndex } from '../_util/hooks/useZIndex'; import { getTransitionName } from '../_util/motion'; @@ -20,7 +21,6 @@ import type { LiteralUnion } from '../_util/type'; import { devUseWarning } from '../_util/warning'; import zIndexContext from '../_util/zindexContext'; import { ConfigContext } from '../config-provider'; -import { NoCompactStyle } from '../space/Compact'; import { useToken } from '../theme/internal'; import PurePanel from './PurePanel'; import useStyle from './style'; @@ -241,9 +241,9 @@ const InternalTooltip = React.forwardRef((props, ref) }, [overlay, title]); const memoOverlayWrapper = ( - + {typeof memoOverlay === 'function' ? memoOverlay() : memoOverlay} - + ); const { From a873ed775505b647f500321fc6eb32d0f1ac5a46 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 21 Jun 2024 02:44:15 +0800 Subject: [PATCH 10/16] chore: upgrade deps (#49532) Co-authored-by: afc163 <507615+afc163@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4ec882dcd8..b01183b1d7 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "rc-input": "~1.5.1", "rc-input-number": "~9.1.0", "rc-mentions": "~2.14.0", - "rc-menu": "~9.14.0", + "rc-menu": "~9.14.1", "rc-motion": "^2.9.2", "rc-notification": "~5.6.0", "rc-pagination": "~4.0.4", From bd40dec8d9ce9d3662b9338a6badafe5259af583 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Fri, 21 Jun 2024 10:10:27 +0800 Subject: [PATCH 11/16] fix: link crossorigin use anonymous instead of bool true (#49525) --- .dumirc.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index e69c97aa5c..909ea186b7 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -65,56 +65,56 @@ export default defineConfig({ as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2', type: 'font/woff2', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff', type: 'font/woff', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf', type: 'font/ttf', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2', type: 'font/woff2', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff', type: 'font/woff', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf', type: 'font/ttf', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', - crossorigin: true, + crossorigin: 'anonymous', }, { rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', - crossorigin: true, + crossorigin: 'anonymous', }, ], headScripts: [ From 1b3c25af9a5d3d946b5f6cfacf8d762e88653f81 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 21 Jun 2024 15:50:01 +0800 Subject: [PATCH 12/16] chore(style): backticks to single quotes (#49540) --- components/config-provider/demo/wave.tsx | 2 +- components/timeline/style/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/config-provider/demo/wave.tsx b/components/config-provider/demo/wave.tsx index 3edfd7c7f9..a75ae94369 100644 --- a/components/config-provider/demo/wave.tsx +++ b/components/config-provider/demo/wave.tsx @@ -39,7 +39,7 @@ const createDot = ( dot.style.borderRadius = '50%'; dot.style.background = color; dot.style.transform = 'translate(-50%, -50%)'; - dot.style.transition = `all 1s ease-out`; + dot.style.transition = 'all 1s ease-out'; holder.appendChild(dot); return dot; diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index 822feff4d3..ff219c63bc 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -116,7 +116,7 @@ const genTimelineStyle: GenerateStyle = (token) => { textAlign: 'center', border: 0, borderRadius: 0, - transform: `translate(-50%, -50%)`, + transform: 'translate(-50%, -50%)', }, '&-content': { From d329fc3ac158e95e7448c7b42bb933861c2ffea2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 22 Jun 2024 15:39:23 +0800 Subject: [PATCH 13/16] chore: revert to dumi 2.3.x (#49550) * chore: turn off mako build * chore: revert to dumi 2.3.x --- .dumirc.ts | 9 ++------- package.json | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index 909ea186b7..49c41d2ebe 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -13,15 +13,10 @@ export default defineConfig({ // to avoid generate routes for .dumi/pages/index/components/xx exclude: [new RegExp('index/components/')], }, - ssr: - process.env.NODE_ENV === 'production' - ? { - builder: 'mako', - } - : false, + ssr: process.env.NODE_ENV === 'production' ? {} : false, hash: true, mfsu: false, - mako: {}, + // mako: {}, crossorigin: {}, outputPath: '_site', favicons: ['https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png'], diff --git a/package.json b/package.json index b01183b1d7..15c738ae86 100644 --- a/package.json +++ b/package.json @@ -241,7 +241,7 @@ "cross-fetch": "^4.0.0", "crypto": "^1.0.1", "dekko": "^0.2.1", - "dumi": "2.4.0-alpha.16", + "dumi": "~2.3.8", "dumi-plugin-color-chunk": "^1.1.1", "esbuild-loader": "^4.1.0", "eslint": "^8.57.0", From 7e74c79bddbac82475e022827ebdd9be4ede9a28 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 22 Jun 2024 16:26:37 +0800 Subject: [PATCH 14/16] chore(deps-dev): bump @octokit/rest (#49545) * chore(deps-dev): bump the dev-dependencies group with 4 updates Bumps the dev-dependencies group with 4 updates: [@antv/g6](https://github.com/antvis/g6), [@octokit/rest](https://github.com/octokit/rest.js), [eslint-plugin-lodash](https://github.com/idok/eslint-plugin-lodash) and [typescript](https://github.com/Microsoft/TypeScript). Updates `@antv/g6` from 4.8.24 to 5.0.2 - [Release notes](https://github.com/antvis/g6/releases) - [Changelog](https://github.com/antvis/G6/blob/v5/CHANGELOG.md) - [Commits](https://github.com/antvis/g6/commits) Updates `@octokit/rest` from 20.1.1 to 21.0.0 - [Release notes](https://github.com/octokit/rest.js/releases) - [Commits](https://github.com/octokit/rest.js/compare/v20.1.1...v21.0.0) Updates `eslint-plugin-lodash` from 7.4.0 to 8.0.0 - [Changelog](https://github.com/idok/eslint-plugin-lodash/blob/master/CHANGELOG.md) - [Commits](https://github.com/idok/eslint-plugin-lodash/commits/v8.0.0) Updates `typescript` from 5.4.5 to 5.5.2 - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](https://github.com/Microsoft/TypeScript/compare/v5.4.5...v5.5.2) --- updated-dependencies: - dependency-name: "@antv/g6" dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: "@octokit/rest" dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: eslint-plugin-lodash dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] * Update package.json Signed-off-by: afc163 * Update package.json Signed-off-by: afc163 * Update package.json Signed-off-by: afc163 --------- Signed-off-by: dependabot[bot] Signed-off-by: afc163 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: afc163 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 15c738ae86..3733e6e56a 100644 --- a/package.json +++ b/package.json @@ -183,7 +183,7 @@ "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0", "@microflash/rehype-figure": "^2.1.0", "@npmcli/run-script": "^8.1.0", - "@octokit/rest": "^20.1.1", + "@octokit/rest": "^21.0.0", "@qixian.cs/github-contributors-list": "^2.0.2", "@size-limit/file": "^11.1.4", "@stackblitz/sdk": "^1.10.0", From c5114b3f87a850bca42dae0e4688f9f7bff15202 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 22 Jun 2024 16:51:41 +0800 Subject: [PATCH 15/16] docs: fix change-log button position (#49552) * docs: fix changelog button position * fix lint --- .../ComponentChangelog/ComponentChangelog.tsx | 15 ++------- .dumi/theme/slots/Content/index.tsx | 32 ++++++++++--------- 2 files changed, 19 insertions(+), 28 deletions(-) diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index 4a091ae3ca..0cbd4af607 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -28,16 +28,6 @@ function matchDeprecated(v: string): MatchDeprecatedResult { } const useStyle = createStyles(({ token, css }) => ({ - history: css` - position: absolute; - top: 0; - inset-inline-end: ${token.marginXS}px; - `, - - li: css` - // white-space: pre; - `, - ref: css` margin-inline-start: ${token.marginXS}px; `, @@ -75,7 +65,7 @@ export interface ComponentChangelogProps { const locales = { cn: { - full: '完整更新日志', + full: '查看完整日志', changelog: '更新日志', loading: '加载中...', empty: '暂无更新', @@ -213,7 +203,7 @@ const ComponentChangelog: React.FC = (props) => {