Skip to content

Commit 3f617b5

Browse files
weareoutmanweareoutman
authored
Merge pull request #1557 from easyops-cn/steve/theme-variant-elevo
fix(): support themeVariant: elevo
2 parents 8044ad1 + 34e609f commit 3f617b5

File tree

10 files changed

+87
-14
lines changed

10 files changed

+87
-14
lines changed

‎bricks/basic/src/actions/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ import type {
1515
import { Target } from "../interface";
1616
import type { EoTooltip, ToolTipProps } from "../tooltip";
1717
import type { Link, LinkProps } from "../link";
18-
import type { Menu } from "../menu";
18+
import type { Menu, MenuProps } from "../menu";
1919
import type { MenuComponentProps, MenuItem } from "../menu-item";
2020
import styleText from "./styles.shadow.css";
2121

2222
const { defineElement, property, event } = createDecorators();
2323

2424
const WrappedTooltip = wrapBrick<EoTooltip, ToolTipProps>("eo-tooltip");
2525
const WrappedLink = wrapBrick<Link, LinkProps>("eo-link");
26-
const WrappedMenu = wrapBrick<Menu, unknown>("eo-menu");
26+
const WrappedMenu = wrapBrick<Menu, MenuProps>("eo-menu");
2727
const WrappedMenuItem = wrapBrick<MenuItem, MenuComponentProps>("eo-menu-item");
2828
const WrappedPopover = wrapBrick<
2929
Popover,
@@ -155,6 +155,7 @@ export interface ActionsProps {
155155
actions?: Action[];
156156
itemDraggable?: boolean;
157157
checkedKeys?: (string | number)[];
158+
themeVariant?: "default" | "elevo";
158159
}
159160

160161
export interface ActionsEvents {
@@ -201,6 +202,10 @@ class EoActions extends ReactNextElement implements ActionsProps {
201202
@property({ type: Boolean })
202203
accessor itemDraggable: boolean | undefined;
203204

205+
/** 主题变体 */
206+
@property({ render: false })
207+
accessor themeVariant: "default" | "elevo" | undefined;
208+
204209
/**
205210
* 点击按钮时触发
206211
* @detail 该按钮配置

‎bricks/basic/src/actions/styles.shadow.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
:host {
22
display: block;
33
width: fit-content;
4+
5+
--eo-actions-border-radius: var(--medius-border-radius);
46
}
57

68
:host([hidden]) {
79
display: none;
810
}
911

12+
:host([theme-variant="elevo"]) {
13+
--eo-actions-border-radius: 6px;
14+
}
15+
1016
eo-menu {
1117
padding: 2px;
12-
border-radius: 4px;
18+
border-radius: var(--eo-actions-border-radius);
1319
background: var(--antd-dropdown-menu-bg);
1420
box-shadow: var(--antd-box-shadow-base);
1521
border: none;
@@ -18,7 +24,7 @@ eo-menu {
1824
eo-menu-item::part(menu-item) {
1925
padding: 5px 12px;
2026
line-height: 22px;
21-
border-radius: var(--medius-border-radius);
27+
border-radius: var(--eo-actions-border-radius);
2228
min-width: max-content;
2329
}
2430

‎bricks/basic/src/avatar/index.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ const TEXT_NODE_PADDING = 4;
2525
const TEXT_NODE_MIN_FONT_SIZE = 10;
2626

2727
export type AvatarSize = "large" | "medium" | "small" | "xs";
28+
export type AvatarGapSize = "medium" | "large";
2829

2930
export interface AvatarProps {
3031
size?: AvatarSize;
32+
gapSize?: AvatarGapSize;
3133
shape?: "circle" | "round-square";
3234
src?: string;
3335
alt?: string;
@@ -43,6 +45,7 @@ export interface AvatarProps {
4345
* @part avatar-img - 显示为图片时的头像容器
4446
* @part avatar-icon - 显示为图标时的头像容器
4547
* @part avatar-text - 显示为文本时的头像容器
48+
* @part name - 用户名
4649
* @category display-component
4750
*/
4851
export
@@ -55,6 +58,13 @@ class EoAvatar extends ReactNextElement implements AvatarProps {
5558
*/
5659
@property() accessor size: AvatarSize = "medium";
5760

61+
/**
62+
* 头像和名称间距大小
63+
*
64+
* @default "medium"
65+
*/
66+
@property({ render: false }) accessor gapSize: "medium" | "large" | undefined;
67+
5868
/**
5969
* 形状
6070
*/
@@ -236,7 +246,11 @@ export function EoAvatarComponent(props: AvatarProps) {
236246
>
237247
{avatarNode}
238248
</span>
239-
{props.showName && <span className="name">{name}</span>}
249+
{props.showName && (
250+
<span className="name" part="name">
251+
{name}
252+
</span>
253+
)}
240254
</>
241255
);
242256
}

‎bricks/basic/src/avatar/styles.shadow.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,7 @@
107107
margin-left: 4px;
108108
vertical-align: middle;
109109
}
110+
111+
:host([gap-size="large"]) .name {
112+
margin-left: 8px;
113+
}

‎bricks/basic/src/dropdown-actions/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const WrappedActions = wrapBrick<
4242
});
4343

4444
export interface DropdownActionsProps
45-
extends Pick<ActionsProps, "actions" | "checkedKeys"> {
45+
extends Pick<ActionsProps, "actions" | "checkedKeys" | "themeVariant"> {
4646
disabled?: boolean;
4747
strategy?: "absolute" | "fixed";
4848
}
@@ -101,6 +101,10 @@ class EoDropdownActions
101101
@property()
102102
accessor strategy: "absolute" | "fixed" | undefined;
103103

104+
/** 主题变体 */
105+
@property()
106+
accessor themeVariant: "default" | "elevo" | undefined;
107+
104108
/**
105109
* 点击按钮时触发
106110
* @detail 该按钮配置
@@ -132,6 +136,7 @@ class EoDropdownActions
132136
actions={this.actions}
133137
disabled={this.disabled}
134138
strategy={this.strategy}
139+
themeVariant={this.themeVariant}
135140
onActionClick={this.#handleClick}
136141
onVisibleChange={this.#handleVisibleChange}
137142
checkedKeys={this.checkedKeys}
@@ -150,6 +155,7 @@ export function EoDropdownActionsComponent({
150155
checkedKeys,
151156
disabled,
152157
strategy,
158+
themeVariant,
153159
onActionClick,
154160
onVisibleChange,
155161
}: DropdownActionsComponentProps) {
@@ -180,8 +186,9 @@ export function EoDropdownActionsComponent({
180186
<slot slot="anchor" />
181187
<WrappedActions
182188
actions={actions}
183-
onActionClick={handleActionClick}
184189
checkedKeys={checkedKeys}
190+
themeVariant={themeVariant}
191+
onActionClick={handleActionClick}
185192
/>
186193
</WrappedPopover>
187194
);

‎bricks/basic/src/easyops-avatar/index.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe("eo-easyops-avatar", () => {
3737
});
3838
expect(element.shadowRoot?.childNodes.length).toBeGreaterThan(1);
3939
expect(element.shadowRoot?.innerHTML).toMatchInlineSnapshot(
40-
`"<style>styles.shadow.css</style><eo-avatar src="/test.jpg" name="easyops" size="medium" bordered="" part="eo-avatar" exportparts="avatar, avatar-img, avatar-icon, avatar-text"></eo-avatar>"`
40+
`"<style>styles.shadow.css</style><eo-avatar src="/test.jpg" name="easyops" size="medium" bordered="" part="eo-avatar" exportparts="avatar, avatar-img, avatar-icon, avatar-text, name"></eo-avatar>"`
4141
);
4242

4343
act(() => {

‎bricks/basic/src/easyops-avatar/index.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React from "react";
22
import { createDecorators } from "@next-core/element";
33
import { ReactNextElement, wrapBrick } from "@next-core/react-element";
44
import "@next-core/theme";
5-
import type { EoAvatar, AvatarProps, AvatarSize } from "../avatar/index.js";
5+
import type {
6+
EoAvatar,
7+
AvatarProps,
8+
AvatarSize,
9+
AvatarGapSize,
10+
} from "../avatar/index.js";
611
import { useUserInfoByNameOrInstanceId } from "./useUserInfoByNameOrInstanceId.js";
712
import styleText from "./styles.shadow.css";
813

@@ -13,6 +18,7 @@ const WrappedAvatar = wrapBrick<EoAvatar, AvatarProps>("eo-avatar");
1318
export interface EoEasyopsAvatarProps {
1419
nameOrInstanceId?: string;
1520
size?: AvatarSize;
21+
gapSize?: AvatarGapSize;
1622
bordered?: boolean;
1723
showName?: boolean;
1824
}
@@ -25,6 +31,7 @@ export interface EoEasyopsAvatarProps {
2531
* @part avatar-img - 显示为图片时的头像容器
2632
* @part avatar-icon - 显示为图标时的头像容器
2733
* @part avatar-text - 显示为文本时的头像容器
34+
* @part name - 用户名
2835
* @category display-component
2936
*/
3037
export
@@ -42,6 +49,13 @@ class EoEasyopsAvatar extends ReactNextElement implements EoEasyopsAvatarProps {
4249
*/
4350
@property() accessor size: AvatarSize = "medium";
4451

52+
/**
53+
* 头像和名称间距大小
54+
*
55+
* @default "medium"
56+
*/
57+
@property() accessor gapSize: AvatarGapSize | undefined;
58+
4559
/**
4660
* 是否有边框
4761
*/
@@ -71,7 +85,7 @@ class EoEasyopsAvatar extends ReactNextElement implements EoEasyopsAvatarProps {
7185
}
7286

7387
export function EoEasyopsAvatarComponent(props: EoEasyopsAvatarProps) {
74-
const { nameOrInstanceId, size, bordered, showName } = props;
88+
const { nameOrInstanceId, size, gapSize, bordered, showName } = props;
7589

7690
const { user } = useUserInfoByNameOrInstanceId(nameOrInstanceId);
7791

@@ -80,10 +94,11 @@ export function EoEasyopsAvatarComponent(props: EoEasyopsAvatarProps) {
8094
src={user?.user_icon}
8195
name={user?.name}
8296
size={size}
97+
gapSize={gapSize}
8398
bordered={bordered}
8499
showName={showName}
85100
part="eo-avatar"
86-
exportparts="avatar, avatar-img, avatar-icon, avatar-text"
101+
exportparts="avatar, avatar-img, avatar-icon, avatar-text, name"
87102
/>
88103
);
89104
}

‎bricks/basic/src/menu/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,24 @@ export interface SidebarMenu {
1616
defaultCollapsedBreakpoint?: number;
1717
menuItems: SidebarMenuItem[];
1818
}
19+
20+
export interface MenuProps {
21+
mode?: "vertical" | "horizontal";
22+
}
23+
1924
/**
2025
* 菜单构件
2126
* @author sailor
2227
*
2328
* @slot - 菜单内容
2429
* @insider
2530
*/
31+
export
2632
@defineElement("eo-menu", {
2733
styleTexts: [styleText],
2834
alias: ["basic.general-menu"],
2935
})
30-
class Menu extends ReactNextElement {
36+
class Menu extends ReactNextElement implements MenuProps {
3137
/**
3238
* 菜单布局方式 支持垂直、水平两种
3339
*/
@@ -38,4 +44,3 @@ class Menu extends ReactNextElement {
3844
return <slot />;
3945
}
4046
}
41-
export { Menu };

‎bricks/basic/src/mini-actions/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export type ActionType = SimpleActionType & Divider;
6060

6161
export interface EoMiniActionsProps {
6262
actions?: ActionType[];
63+
themeVariant?: "default" | "elevo";
6364
}
6465

6566
export interface EoMiniActionsEvents {
@@ -89,6 +90,10 @@ class EoMiniActions extends ReactNextElement implements EoMiniActionsProps {
8990
})
9091
accessor actions: ActionType[] | undefined;
9192

93+
/** 主题变体 */
94+
@property()
95+
accessor themeVariant: "default" | "elevo" | undefined;
96+
9297
/**
9398
* 点击按钮时触发
9499
* @detail 该按钮配置
@@ -118,6 +123,7 @@ class EoMiniActions extends ReactNextElement implements EoMiniActionsProps {
118123
return (
119124
<EoMiniActionsComponent
120125
actions={this.actions}
126+
themeVariant={this.themeVariant}
121127
onActionClick={this.#handleActionClick}
122128
onVisibleChange={this.#handleVisibleChange}
123129
/>
@@ -140,7 +146,7 @@ const preventDefaultAndStopPropagationListener = (e: Event) => {
140146
};
141147

142148
export function EoMiniActionsComponent(props: EoMiniActionsComponentProps) {
143-
const { actions, onActionClick, onVisibleChange } = props;
149+
const { actions, themeVariant, onActionClick, onVisibleChange } = props;
144150

145151
const [dropdownVisible, setDropdownVisible] = useState(false);
146152

@@ -260,6 +266,7 @@ export function EoMiniActionsComponent(props: EoMiniActionsComponentProps) {
260266
<WrappedActions
261267
style={{ minWidth: "max-content" }}
262268
actions={dropdownActions}
269+
themeVariant={themeVariant}
263270
onActionClick={(e) => {
264271
handleActionClick(e.detail);
265272
}}

‎bricks/containers/src/modal/modal.shadow.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,20 @@
109109

110110
.modal-header {
111111
border-bottom: 0;
112+
padding: 16px 20px;
113+
}
114+
115+
.modal-body {
116+
padding: 16px 20px;
112117
}
113118

114119
.modal-footer {
115120
border-radius: 0 0 12px 12px;
116121
background: none;
122+
padding: 16px 20px 20px;
123+
}
124+
125+
.close-btn {
126+
margin-top: 4px;
117127
}
118128
}

0 commit comments

Comments
 (0)