From ef6fe2e16c5e9833b3a85ceb19c4545fa4baa196 Mon Sep 17 00:00:00 2001 From: folinhilo Date: Mon, 23 Mar 2026 03:30:31 +0800 Subject: [PATCH] mm --- apps/ui-site/src/gallery/ButtonGallery.tsx | 37 +--------- packages/ui/scripts/generate-index.ts | 2 +- packages/ui/src/common/Slot.tsx | 43 ++++------- packages/ui/src/component/button/Button.tsx | 9 ++- packages/ui/src/index.css | 4 +- packages/ui/src/index.ts | 80 ++++++++------------- 6 files changed, 55 insertions(+), 120 deletions(-) diff --git a/apps/ui-site/src/gallery/ButtonGallery.tsx b/apps/ui-site/src/gallery/ButtonGallery.tsx index 26b2d52..54f5127 100644 --- a/apps/ui-site/src/gallery/ButtonGallery.tsx +++ b/apps/ui-site/src/gallery/ButtonGallery.tsx @@ -1,51 +1,16 @@ import { Button, DownloadSvg } from "@defgov/ui"; import { OuterWrap } from "../common/OuterWrap"; -import { useState } from "react"; import { InnerWrap } from "../common/InnerWrap"; export const ButtonGallery = () => { - const [loading, setLoading] = useState(false); return ( - - - - - - - - - - - - - ); diff --git a/packages/ui/scripts/generate-index.ts b/packages/ui/scripts/generate-index.ts index 213efff..401a957 100644 --- a/packages/ui/scripts/generate-index.ts +++ b/packages/ui/scripts/generate-index.ts @@ -115,7 +115,7 @@ function generateIndexFile(dirPath: string): void { // 生成索引文件内容（模板字符串格式化） const indexContent = ` -import './index.scss'; +import './index.css'; ${exportStatements.join("\n")} `; diff --git a/packages/ui/src/common/Slot.tsx b/packages/ui/src/common/Slot.tsx index a3aaf67..4bee4a7 100644 --- a/packages/ui/src/common/Slot.tsx +++ b/packages/ui/src/common/Slot.tsx @@ -1,3 +1,4 @@ +import { mergeProps } from "@base-ui/react"; import * as React from "react"; import { cn } from "tailwind-variants"; @@ -6,43 +7,25 @@ export interface SlotProps extends React.HTMLAttributes { } export const Slot = React.forwardRef( - ( - { - children, - onClick: externalOnClick, - style: styleProp, - className: classNameProp, - ...props - }, - ref, - ) => { - if (!React.isValidElement(children)) return null; + ({ children, className: externalClassName, ...restProps }, ref) => { + if (!React.isValidElement(children)) { + return null; + } const child = children as React.ReactElement>; + const childProps = child.props || {}; - const mergedClassName = cn(child.props.className as string, classNameProp); + const mergedClassName = cn( + childProps.className as string | undefined, + externalClassName, + ); - const mergedStyle = { - ...(child.props.style ?? {}), - ...(styleProp ?? {}), - } as React.CSSProperties; - - const childOnClick = child.props.onClick as - | ((e: React.MouseEvent) => void) - | undefined; - - const mergedOnClick = (e: React.MouseEvent) => { - childOnClick?.(e); - externalOnClick?.(e); - }; + const otherMergedProps = mergeProps(childProps, restProps); return React.cloneElement(child, { - ...child.props, - ...props, - ref, - style: mergedStyle, + ...otherMergedProps, className: mergedClassName, - onClick: mergedOnClick, + ref, }); }, ); diff --git a/packages/ui/src/component/button/Button.tsx b/packages/ui/src/component/button/Button.tsx index 9dd79eb..86ee46f 100644 --- a/packages/ui/src/component/button/Button.tsx +++ b/packages/ui/src/component/button/Button.tsx @@ -6,6 +6,7 @@ import { itemRootRecipe } from "@/styles/recipe/ItemRoot.recipe"; import { variantRecipe } from "@/styles/recipe/variant.recipe"; import type { ReactNode } from "react"; import { inlineRootRecipe } from "@/styles/recipe/IinlineRoot.recipe"; +import { Slot } from "@/common/Slot"; type ButtonProps = CommonProps & { size?: "md" | "lg" | "xl"; @@ -26,7 +27,7 @@ export const Button = (props: ButtonProps) => { disabled, icon, iconOnly, - hideIcon, + hideIcon = false, } = props; const buttonCls = cn( @@ -39,6 +40,12 @@ export const Button = (props: ButtonProps) => { return ( + {!hideIcon && + (iconOnly ? ( + + ) : ( + {icon} + ))} {children} ); diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index e0a9849..27ec86c 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -3,12 +3,10 @@ @import './styles/theme/theme-variant.css'; @import './styles/utility/brand.css'; @import './styles/utility/gap.css'; -@import './styles/utility/height-inline.css'; @import './styles/utility/height.css'; @import './styles/utility/loading.css'; -@import './styles/utility/margin-right.css'; +@import './styles/utility/margin.css'; @import './styles/utility/padding.css'; @import './styles/utility/skin.css'; @import './styles/utility/variant.css'; -@import './styles/utility/width-inline.css'; @import './styles/utility/width.css'; \ No newline at end of file diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 13a4d4c..b66efb6 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,52 +1,34 @@ -import './index.scss'; +import './index.css'; -export * from './assets/svg/CheckIndicatorOutlineSvg.tsx'; -export * from './assets/svg/CheckIndicatorSvg.tsx'; -export * from './assets/svg/ChevronRightSvg.tsx'; -export * from './assets/svg/CutSvg.tsx'; -export * from './assets/svg/DownloadSvg.tsx'; -export * from './assets/svg/FileSvg.tsx'; -export * from './assets/svg/KeySvg.tsx'; -export * from './assets/svg/MoonSvg.tsx'; -export * from './assets/svg/PasteSvg.tsx'; -export * from './assets/svg/RadioIndicatorOutlineSvg.tsx'; -export * from './assets/svg/RadioIndicatorSvg.tsx'; -export * from './assets/svg/SearchSvg.tsx'; -export * from './assets/svg/SettingSvg.tsx'; -export * from './assets/svg/SpinnerSvg.tsx'; -export * from './assets/svg/SunSvg.tsx'; -export * from './assets/svg/UserSvg.tsx'; -export * from './assets/svg/VolumeHighSvg.tsx'; -export * from './assets/svg/VolumeLowSvg.tsx'; -export * from './assets/svg/VolumeMediumSvg.tsx'; -export * from './assets/svg/VolumeMuteSvg.tsx'; -export * from './common/CommonProps.ts'; -export * from './common/Box.tsx'; -export * from './lv1-fundamental/Slot/Slot.tsx'; -export * from './common/ThemeProvider/ThemeContext.ts'; -export * from './common/ThemeProvider/ThemeProvider.tsx'; -export * from './common/ThemeProvider/useThemeContext.ts'; -export * from './lv2-sized/Root/RootInline.recipe'; -export * from './lv2-sized/Root/RootInline.ts'; -export * from './styles/recipe/ItemRoot.recipe.ts'; -export * from './lv2-sized/ItemRoot/ItemRoot.tsx'; -export * from './lv2-sized/Section/Section.recipe.ts'; -export * from './lv2-sized/Section/Section.tsx'; -export * from './lv3-partial/Icon/Icon.recipe.ts'; -export * from './lv3-partial/Icon/Icon.tsx'; -export * from './lv3-partial/Indicator/Indicator.recipe.ts'; -export * from './lv3-partial/Indicator/Indicator.tsx'; -export * from './lv3-partial/Label/Label.style.ts'; -export * from './lv3-partial/Label/Label.tsx'; -export * from './lv3-partial/Tooltip/Tooltip.tsx'; -export * from './lv4-normal/Button/Button.recipe.ts'; -export * from './lv4-normal/Button/Button.tsx'; -export * from './lv4-normal/Checkbox/Checkbox.recipe.ts'; -export * from './lv4-normal/Checkbox/Checkbox.tsx'; -export * from './lv4-normal/Radio/Radio.recipe.ts'; -export * from './lv4-normal/Radio/Radio.tsx'; -export * from './lv4-normal/Radio/RadioGroup.recipe.ts'; -export * from './lv4-normal/Radio/RadioGroup.tsx'; -export * from './lv4-normal/Radio/RadioGroupContext.ts'; +export * from './assets/svg/CheckIndicatorOutlineSvg'; +export * from './assets/svg/CheckIndicatorSvg'; +export * from './assets/svg/ChevronRightSvg'; +export * from './assets/svg/CutSvg'; +export * from './assets/svg/DownloadSvg'; +export * from './assets/svg/FileSvg'; +export * from './assets/svg/KeySvg'; +export * from './assets/svg/MoonSvg'; +export * from './assets/svg/PasteSvg'; +export * from './assets/svg/RadioIndicatorOutlineSvg'; +export * from './assets/svg/RadioIndicatorSvg'; +export * from './assets/svg/SearchSvg'; +export * from './assets/svg/SettingSvg'; +export * from './assets/svg/SpinnerSvg'; +export * from './assets/svg/SunSvg'; +export * from './assets/svg/UserSvg'; +export * from './assets/svg/VolumeHighSvg'; +export * from './assets/svg/VolumeLowSvg'; +export * from './assets/svg/VolumeMediumSvg'; +export * from './assets/svg/VolumeMuteSvg'; +export * from './common/Box'; +export * from './common/CommonProps'; +export * from './common/Slot'; +export * from './common/ThemeProvider/ThemeContext'; +export * from './common/ThemeProvider/ThemeProvider'; +export * from './common/ThemeProvider/useThemeContext'; +export * from './component/button/Button'; +export * from './styles/recipe/IinlineRoot.recipe'; +export * from './styles/recipe/ItemRoot.recipe'; +export * from './styles/recipe/variant.recipe';