feat: toast component add theme config

content/feedback/toast/index-en-US.md

@@ -381,40 +381,7 @@ function Demo(props = {}) {
 render(Demo);
 ```
 
-## API Reference
-
-The static methods provided are as follows: Display: You can pass in `options` object or string directly. Methods return the value of `toastId`: `const toastId = Toast.info({ /*...options*/ })`
-
--   `Toast.info(options || string)`
--   `Toast.error(options || string)`
--   `Toast.warning(options || string)`
--   `Toast.success(options || string)`
--   `Toast.close(toastId)`  Close Manually ( `toastId` is the return value of the display methods)
--   `Toast.config(config)`  The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
-
-**The following APIs can take effect without calling additional ToastFactory.create(config) to create a new Toast**
-
-| Properties | Instructions                                       | type | Default | version |
-| --- |----------------------------------------------------| --- | --- |---------|
-| content | Toast content                                      | string | ReactNode | ''      |  |
-| duration | Automatic close delay, no auto-close when set to 0 | number | 3 |         |
-| icon | Custom icons                                       | ReactNode |  | 0.25.0  |
-| showClose | Toggle Whether show close button                   | boolean | true | 0.25.0  |
-| textMaxWidth | Maximum width of content                           | number \| string | 450 | 0.25.0  |
-| theme | Style of background fill, one of `light`, `normal` | string | `normal` | 1.0.0   |
-| onClose | Callback function when closing toast               | () => void |  |         |
-| stack | Whether to stack toast                             | boolean | false | 2.42.0  |
-
-**If not specifically declared in Toast.config(config), the following APIs need to call additional ToastFactory.create(config) to create new Toast settings**
-
-| Properties | Instructions                                                                                                                                                | type | Default | version |
-| --- |-------------------------------------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
-| bottom | Pop-up position bottom                                                                                                                                      | number \| string | - | 0.25.0 |
-| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative`   This will change the DOM tree position, but not the view's rendering position.  | () => HTMLElement \| null | () => document.body | 0.34.0 |
-| left | Pop-up position left                                                                                                                                        | number \| string | - | 0.25.0 |
-| right | Pop-up position right                                                                                                                                       | number \| string | - | 0.25.0 |
-| top | Pop-up position top                                                                                                                                         | number \| string | - | 0.25.0 |
-| zIndex | Z-index value                                                                                                                                               | number | 1010 |  |
+### Create Toast with different configurations
 
 -   `ToastFactory.create(config) => Toast`  
     If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):
@@ -451,6 +418,46 @@ HookToast
 -   `Toast.useToast` **v>=1.2.0**  
     When you need access Context, you could use `Toast.useToast` to create a `contextHolder` and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where `contextHolder` is inserted. Hook toast has following methods: `info`, `success`, `warning`, `error`, `close`.
 
+
+## API Reference
+
+The static methods provided are as follows: Display: You can pass in `options` object or string directly. Methods return the value of `toastId`: `const toastId = Toast.info({ /*...options*/ })`
+
+-   `Toast.info(options || string)`
+-   `Toast.error(options || string)`
+-   `Toast.warning(options || string)`
+-   `Toast.success(options || string)`
+-   `Toast.close(toastId)`  Close Manually ( `toastId` is the return value of the display methods)
+-   `Toast.config(config)`  The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
+
+## Options
+
+**Toast Options supports the following APIs as well as the APIs in Config**
+
+| Properties | Instructions                                       | type | Default | version |
+| --- |----------------------------------------------------| --- | --- |---------|
+| content | Toast content                                      | string | ReactNode | ''      |  |
+| icon | Custom icons                                       | ReactNode |  | 0.25.0  |
+| showClose | Toggle Whether show close button                   | boolean | true | 0.25.0  |
+| textMaxWidth | Maximum width of content                           | number \| string | 450 | 0.25.0  |
+| onClose | Callback function when closing toast               | () => void |  |         |
+| stack | Whether to stack toast                             | boolean | false | 2.42.0  |
+| id           | Custom ToastId   | number        |  |  |
+
+## Config
+
+**The following API supports global configuration to change the default configuration of the current Toast**
+
+| Properties | Instructions                                                                                                                                                | type | Default | version |
+| --- |-------------------------------------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
+| bottom | Pop-up position bottom                                                                                                                                      | number \| string | - | 0.25.0 |
+| left | Pop-up position left                                                                                                                                        | number \| string | - | 0.25.0 |
+| right | Pop-up position right                                                                                                                                       | number \| string | - | 0.25.0 |
+| top | Pop-up position top                                                                                                                                         | number \| string | - | 0.25.0 |
+| zIndex | Z-index value                                                                                                                                               | number | 1010 |  |
+| theme | Style of background fill, one of `light`, `normal` | string | `normal` | 1.0.0   |
+| duration | Automatic close delay, no auto-close when set to 0 | number | 3 |         |
+| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative`   This will change the DOM tree position, but not the view's rendering position.  | () => HTMLElement \| null | () => document.body | 0.34.0 |
 ## Accessibility
 
 ### ARIA

content/feedback/toast/index.md

@@ -381,41 +381,7 @@ function Demo(props = {}) {
 render(Demo);
 ```
 
-## API 参考
-
-组件提供的静态方法，使用方式和参数如下：展示：可以直接传入 `options` 对象或 `string`，返回值为`toastId`：`const toastId = Toast.info({ /*...options*/ })`
-
--   `Toast.info(options || string)`
--   `Toast.error(options || string)`
--   `Toast.warning(options || string)`
--   `Toast.success(options || string)`
--   `Toast.close(toastId)` 手动关闭 （ `toastId` 为展示方法的返回值）
--   `Toast.config(config)` 全局配置在调用前提前配置，全局一次生效 ( >= 0.25.0 )
-
-**以下API无需调用额外的 ToastFactory.create(config) 创建新 Toast 即能生效设置**
-
-| 属性 | 说明                        | 类型 | 默认值 | 版本     |
-| --- |---------------------------| --- | --- |--------|
-| content | 提示内容                      | ReactNode | '' |        |
-| duration | 自动关闭的延时，单位 s，设为 0 时不自动关闭  | number | 3 |        |
-| icon | 自定义图标                     | ReactNode |  | 0.25.0 |
-| showClose | 是否展示关闭按钮                  | boolean | true | 0.25.0 |
-| textMaxWidth | 内容的最大宽度                   | number \| string | 450 | 0.25.0 |
-| theme | 填充样式，支持 `light`, `normal` | string | `normal` | 1.0.0  |
-| onClose | toast 关闭的回调函数             | () => void |  |        |
-| stack | 是否堆叠 Toast                | boolean | false | 2.42.0 |
-
-**若未在 Toast.config(config) 中特别声明，以下API需要调用额外的 ToastFactory.create(config) 创建新 Toast 生效设置**
-
-| 属性 | 说明                                                                                        | 类型 | 默认值 | 版本 |
-| --- |-------------------------------------------------------------------------------------------| --- | --- | --- |
-| bottom | 弹出位置 bottom                                                                               | number \| string | - | 0.25.0 |
-| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 container 和 内部的 .semi-toast-wrapper 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。  `position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
-| left | 弹出位置 left                                                                                 | number \| string | - | 0.25.0 |
-| right | 弹出位置 right                                                                                | number \| string | - | 0.25.0 |
-| top | 弹出位置 top                                                                                  | number \| string | - | 0.25.0 |
-| zIndex | 弹层 z-index 值                                                                              | number | 1010 |  |
-
+### 创建不同配置 Toast
 
 -   `ToastFactory.create(config) => Toast`  
     如果您的应用中需要使用不同 config 的 Toast，可以使用 ToastFactory.create(config)创建新的 Toast (>= 1.23):
@@ -452,6 +418,47 @@ HookToast ( >= 1.2.0 )：
 -   `Toast.useToast()`  
     当你需要使用 Context 时，可以通过 Toast.useToast 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Toast 将会得到 contextHolder 所在位置的所有上下文。创建的 toast 对象拥有与以下方法：`info`, `success`, `warning`, `error`, `close`。
 
+
+## API 参考
+
+组件提供的静态方法，使用方式和参数如下：展示：可以直接传入 `options` 对象或 `string`，返回值为`toastId`：`const toastId = Toast.info({ /*...options*/ })`
+
+-   `Toast.info(options || string)`
+-   `Toast.error(options || string)`
+-   `Toast.warning(options || string)`
+-   `Toast.success(options || string)`
+-   `Toast.close(toastId)` 手动关闭 （ `toastId` 为展示方法的返回值）
+-   `Toast.config(config)` 全局配置在调用前提前配置，全局一次生效 ( >= 0.25.0 )
+
+## Options
+
+**Toast Options 支持以下 API 及 Config 中的 API**
+
+| 属性           | 说明            | 类型            | 默认值 | 版本     |
+|--------------|---------------|---------------| --- |--------|
+| content      | 提示内容          | ReactNode     | '' |        |
+| icon         | 自定义图标         | ReactNode     |  | 0.25.0 |
+| showClose    | 是否展示关闭按钮      | boolean       | true | 0.25.0 |
+| textMaxWidth | 内容的最大宽度       | number \      | string | 450 | 0.25.0 |
+| onClose      | toast 关闭的回调函数 | () => void    |  |        |
+| stack        | 是否堆叠 Toast    | boolean       | false | 2.42.0 |
+| id           | 自定义 ToastId   | number        |  |  |
+
+## Config
+
+**以下 API 支持全局配置，用于更改当前 Toast 的默认配置**
+
+| 属性 | 说明                                                                                        | 类型 | 默认值 | 版本 |
+| --- |-------------------------------------------------------------------------------------------| --- | --- | --- |
+| bottom | 弹出位置 bottom                                                                               | number \| string | - | 0.25.0 |
+| left | 弹出位置 left                                                                                 | number \| string | - | 0.25.0 |
+| right | 弹出位置 right                                                                                | number \| string | - | 0.25.0 |
+| top | 弹出位置 top                                                                                  | number \| string | - | 0.25.0 |
+| zIndex | 弹层 z-index 值                                                                              | number | 1010 |  |
+| theme | 填充样式，支持 `light`, `normal` | string | `normal` | 1.0.0  |
+| duration | 自动关闭的延时，单位 s，设为 0 时不自动关闭  | number | 3 |        |
+| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 container 和 内部的 .semi-toast-wrapper 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。  `position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
+
 ## Accessibility
 
 ### ARIA

packages/semi-foundation/toast/toastFoundation.ts

@@ -13,6 +13,7 @@ export interface ConfigProps {
     right?: number | string;
     duration?: number;
     zIndex?: number;
+    theme?: ToastTheme;
     getPopupContainer?: () => HTMLElement | null
 }
 export interface ToastProps extends ConfigProps {
@@ -24,7 +25,6 @@ export interface ToastProps extends ConfigProps {
     className?: string;
     showClose?: boolean;
     icon?: any;
-    theme?: ToastTheme;
     direction?: Directions;
     close?: (id: string) => void;
     stack?: boolean

packages/semi-ui/toast/__test__/toast-command-call.test.js

@@ -61,4 +61,26 @@ describe('Toast - 2', () => {
         expect(style.bottom).toEqual('30px');
         expect(style.right).toEqual('40px');
     });
+
+    it('set global config', () => {
+        Toast.config({
+            theme: 'light',
+            duration: 0,
+            top: 40,
+            left: 30,
+            bottom: 20,
+            right: 10,
+            zIndex: 30,
+        })
+        Toast.info('Hi, Bytedance dance');
+        let toastWrapper = document.getElementsByClassName(`${BASE_CLASS_PREFIX}-toast-wrapper`)[0];
+        let style = toastWrapper.style;
+        expect(style.top).toEqual('40px');
+        expect(style.left).toEqual('30px');
+        expect(style.bottom).toEqual('20px');
+        expect(style.right).toEqual('10px');
+        expect(style.zIndex).toEqual('30');
+        let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`);
+        expect(toast.classList.contains(`${BASE_CLASS_PREFIX}-toast-light`)).toEqual(true);
+    });
 });

packages/semi-ui/toast/index.tsx

@@ -202,6 +202,9 @@ const createBaseToast = () => class ToastList extends BaseComponent<ToastListPro
             }
         });
 
+        if (typeof opts.theme === 'string' && strings.themes.includes(opts.theme)) {
+            ToastList.defaultOpts.theme = opts.theme;
+        }
         if (typeof opts.zIndex === 'number') {
             ToastList.defaultOpts.zIndex = opts.zIndex;
         }