From 6a38e35af3351ad5e7efc7df416a06f50428ca03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E7=86=B1?= Date: Fri, 9 May 2025 21:39:02 +0800 Subject: [PATCH] refactor: update styling and class names across various components to improve maintainability (#5167) --- .../uni-formula-ui/package.json | 1 + .../src/views/components/DocFormulaPopup.tsx | 11 ++- .../src/views/UniSlideSideBar.tsx | 9 +- .../src/views/uni-controls/UniControls.tsx | 20 ++-- .../src/views/uni-sidebar/UniSidebar.tsx | 9 +- .../src/views/workbench/UniWorkbench.tsx | 9 +- .../components/cascader-list/CascaderList.tsx | 6 +- .../src/components/dialog/DialogPrimitive.tsx | 7 +- .../components/dropdown-menu/DropdownMenu.tsx | 2 +- .../dropdown-menu/DropdownMenuPrimitive.tsx | 16 ++-- .../components/dropdown/Dropdown.stories.tsx | 9 +- .../components/dropdown/PopoverPrimitive.tsx | 8 +- .../components/input-number/InputNumber.tsx | 2 + .../design/src/components/input/Input.tsx | 7 +- packages/design/src/components/kbd/Kbd.tsx | 10 +- packages/design/src/components/menu/Menu.tsx | 9 +- .../design/src/components/message/Message.tsx | 2 +- .../src/components/select-list/SelectList.tsx | 10 +- .../src/components/select/MultipleSelect.tsx | 11 ++- .../design/src/components/select/Select.tsx | 9 +- packages/design/src/helper/class-utilities.ts | 28 ++++++ .../design/src/helper/{clsx.tsx => clsx.ts} | 0 packages/design/src/helper/scrollbar-cls.ts | 17 ---- packages/design/src/index.ts | 11 ++- .../doc-image-panel/DocDrawingPosition.tsx | 6 +- .../doc-image-panel/DocDrawingTextWrap.tsx | 9 +- .../src/views/hyper-link-edit/index.tsx | 9 +- .../src/views/hyper-link-popup/index.tsx | 12 +-- .../src/views/mention-list/index.tsx | 10 +- .../src/views/menu/index.tsx | 14 +-- .../components/float-toolbar/FloatToolbar.tsx | 9 +- .../components/list-type-picker/picker.tsx | 6 +- .../src/components/paragraph-menu/index.tsx | 12 ++- .../src/views/paragraph-setting/Setting.tsx | 8 +- .../src/views/rich-text-editor/index.tsx | 8 +- .../views/image-popup-menu/ImagePopupMenu.tsx | 19 ++-- .../src/views/panel/DrawingAlign.tsx | 14 +-- .../src/views/panel/DrawingArrange.tsx | 11 +-- .../src/views/panel/DrawingTransform.tsx | 14 +-- .../src/views/panel/ImageCropper.tsx | 14 +-- .../components/panel/rule-edit/ColorScale.tsx | 11 +-- .../components/panel/rule-edit/DataBar.tsx | 11 +-- .../components/panel/rule-edit/Formula.tsx | 10 +- .../components/panel/rule-edit/IconSet.tsx | 18 ++-- .../src/components/panel/rule-edit/styles.ts | 4 +- .../views/components/CrosshairHighlight.tsx | 8 +- .../formula-input/CustomFormulaInput.tsx | 11 +-- .../formula-input/ListFormulaInput.tsx | 31 +++---- .../sheet-image-panel/SheetDrawingAnchor.tsx | 14 +-- .../SheetsFilterByConditionsPanel.tsx | 15 ++- .../components/SheetsFilterByValuesPanel.tsx | 24 ++--- .../help-function/HelpFunction.tsx | 27 +++--- .../search-function/SearchFunction.tsx | 12 +-- .../input-params/InputParams.tsx | 5 +- .../select-function/SelectFunction.tsx | 25 +++-- .../src/views/CellLinkEdit/index.tsx | 9 +- .../src/views/CellLinkPopup/index.tsx | 11 +-- packages/sheets-note-ui/src/views/note.tsx | 10 +- .../src/views/components/CustomFormat.tsx | 7 +- .../src/views/components/SheetTableAnchor.tsx | 9 +- .../components/SheetTableConditionPanel.tsx | 12 +-- .../components/SheetTableFilterPanel.tsx | 26 +++--- .../components/SheetTableItemsFilterPanel.tsx | 9 +- .../views/components/SheetTableThemePanel.tsx | 91 ++++++++----------- .../components/border-panel/BorderPanel.tsx | 13 ++- .../border-panel/border-line/BorderLine.tsx | 1 - .../border-line/icons/BorderDashDot.tsx | 2 - .../border-line/icons/BorderDashDotDot.tsx | 2 - .../border-line/icons/BorderDashed.tsx | 2 - .../border-line/icons/BorderDotted.tsx | 2 - .../border-line/icons/BorderHair.tsx | 2 - .../border-line/icons/BorderMedium.tsx | 2 - .../border-line/icons/BorderMediumDashDot.tsx | 2 - .../icons/BorderMediumDashDotDot.tsx | 2 - .../border-line/icons/BorderMediumDashed.tsx | 2 - .../border-line/icons/BorderThick.tsx | 2 - .../border-line/icons/BorderThin.tsx | 2 - .../AutoFillPopupMenu.tsx | 7 +- .../views/clipboard/ClipboardPopupMenu.tsx | 14 +-- .../src/views/defined-name/DefinedName.tsx | 8 +- .../defined-name/DefinedNameContainer.tsx | 60 +++++++----- .../views/defined-name/DefinedNameInput.tsx | 17 ++-- .../views/defined-name/DefinedNameOverlay.tsx | 9 +- .../views/dropdown/date-dropdown/index.tsx | 8 +- .../views/dropdown/list-dropdown/index.tsx | 13 ++- .../editor-container/EditorContainer.tsx | 9 +- .../src/views/formula-bar/FormulaBar.tsx | 18 ++-- .../views/mobile/sheet-bar/MobileSheetBar.tsx | 23 +++-- .../panel-detail/PermissionDetailUserPart.tsx | 9 +- .../src/views/permission/panel-list/index.tsx | 9 +- .../sheet-bar/sheet-bar-tabs/SheetBarItem.tsx | 4 +- .../image-popup-menu/ImagePopupMenu.tsx | 14 ++- .../src/components/panels/FillPanel.tsx | 7 +- .../src/components/panels/TransformPanel.tsx | 7 +- .../src/components/slide-bar/SlideBar.tsx | 17 ++-- .../editor-container/EditorContainer.tsx | 6 +- .../src/views/thread-comment-tree/index.tsx | 38 +++++--- .../ui/src/components/menu/desktop/Menu.tsx | 2 +- .../ui/src/views/components/ribbon/Ribbon.tsx | 11 +-- .../views/components/ribbon/ToolbarItem.tsx | 2 + .../shortcut-panel/ShortcutPanel.tsx | 9 +- .../src/views/components/sidebar/Sidebar.tsx | 20 ++-- .../mobile-workbench/MobileWorkbench.tsx | 9 +- packages/ui/src/views/workbench/Workbench.tsx | 14 ++- pnpm-lock.yaml | 3 + 105 files changed, 579 insertions(+), 632 deletions(-) create mode 100644 packages/design/src/helper/class-utilities.ts rename packages/design/src/helper/{clsx.tsx => clsx.ts} (100%) delete mode 100644 packages/design/src/helper/scrollbar-cls.ts diff --git a/packages-experimental/uni-formula-ui/package.json b/packages-experimental/uni-formula-ui/package.json index 7c7f3d748c..a5f6195026 100644 --- a/packages-experimental/uni-formula-ui/package.json +++ b/packages-experimental/uni-formula-ui/package.json @@ -67,6 +67,7 @@ }, "dependencies": { "@univerjs/core": "workspace:*", + "@univerjs/design": "workspace:*", "@univerjs/docs": "workspace:*", "@univerjs/docs-ui": "workspace:*", "@univerjs/engine-render": "workspace:*", diff --git a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx index d07e7c990e..9b6d1e5e8c 100644 --- a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx +++ b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx @@ -28,10 +28,11 @@ import { VerticalAlign, WrapStrategy, } from '@univerjs/core'; +import { borderClassName, clsx } from '@univerjs/design'; import { CheckMarkSingle, CloseSingle } from '@univerjs/icons'; import { useDependency, useObservable } from '@univerjs/ui'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { CloseFormulaPopupOperation, ConfirmFormulaPopupCommand } from '../../commands/operations/operation'; import { DOC_FORMULA_POPUP_KEY, UniFormulaPopupService } from '../../services/formula-popup.service'; @@ -131,12 +132,12 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) { return (
onHovered(true)} onMouseLeave={() => onHovered(false)} > diff --git a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx index 8343a6084b..01791be166 100644 --- a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx +++ b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx @@ -16,7 +16,7 @@ import type { SlideDataModel } from '@univerjs/core'; import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core'; -import { clsx, scrollbarClassName } from '@univerjs/design'; +import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design'; import { IRenderManagerService } from '@univerjs/engine-render'; import { IncreaseSingle } from '@univerjs/icons'; import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOperation } from '@univerjs/slides-ui'; @@ -107,10 +107,9 @@ export function UniSlideSideBar() { key={item.id} className={clsx(` univer-relative univer-my-4 univer-box-border univer-flex univer-w-[160px] - univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid - univer-border-gray-200 - hover:univer-border-primary-500 - `, item.id === activatePageId && 'univer-border-primary-500')} + univer-overflow-hidden univer-rounded-lg + hover:univer-border-primary-600 + `, borderClassName, item.id === activatePageId && 'univer-border-primary-600')} onClick={() => activatePage(item.id)} > @@ -140,13 +139,10 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: {shortcuts?.map((item) => (
{ showClose && (
ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r [&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200 - `, scrollbarClassName, wrapperClassName)} + `, borderClassName, scrollbarClassName, wrapperClassName)} > {activeOptions.map((options, index) => options.length diff --git a/packages/design/src/components/dialog/DialogPrimitive.tsx b/packages/design/src/components/dialog/DialogPrimitive.tsx index 31be884166..ba1242cc35 100644 --- a/packages/design/src/components/dialog/DialogPrimitive.tsx +++ b/packages/design/src/components/dialog/DialogPrimitive.tsx @@ -18,6 +18,7 @@ import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from 'react import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from '@radix-ui/react-dialog'; import { CloseSingle } from '@univerjs/icons'; import { forwardRef } from 'react'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; const Dialog = Root; @@ -63,9 +64,8 @@ const DialogContent = forwardRef< ` univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1050] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 - univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-px-6 univer-py-4 - univer-text-gray-500 univer-shadow-md univer-duration-200 - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-gray-400 + univer-bg-white univer-px-6 univer-py-4 univer-text-gray-500 univer-shadow-md univer-duration-200 + dark:univer-bg-gray-700 dark:univer-text-gray-400 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] @@ -74,6 +74,7 @@ const DialogContent = forwardRef< data-[state=open]:univer-slide-in-from-top-[48%] sm:univer-rounded-lg `, + borderClassName, className )} {...props} diff --git a/packages/design/src/components/dropdown-menu/DropdownMenu.tsx b/packages/design/src/components/dropdown-menu/DropdownMenu.tsx index 2a9d55235e..5dadab4928 100644 --- a/packages/design/src/components/dropdown-menu/DropdownMenu.tsx +++ b/packages/design/src/components/dropdown-menu/DropdownMenu.tsx @@ -172,7 +172,7 @@ export function DropdownMenu(props: IDropdownMenuProps) { {children} - e.stopPropagation()}> + e.stopPropagation()}> {items.map((item, index) => renderMenuItem(item, index))} diff --git a/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx b/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx index 973f9e28db..7c3cf7687a 100644 --- a/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx +++ b/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx @@ -33,8 +33,8 @@ import { Trigger, } from '@radix-ui/react-dropdown-menu'; import { CheckMarkSingle, MoreRightSingle } from '@univerjs/icons'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; function DropdownMenuPrimitive({ ...props @@ -127,9 +127,9 @@ function DropdownMenuSubContent({ className={clsx( ` univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)] - univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 + univer-shadow-md + dark:univer-bg-gray-700 dark:univer-text-white data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 @@ -139,6 +139,7 @@ function DropdownMenuSubContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} @@ -160,9 +161,9 @@ function DropdownMenuContent({ className={clsx( ` univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)] - univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 + univer-shadow-md + dark:univer-bg-gray-700 dark:univer-text-white data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 @@ -172,6 +173,7 @@ function DropdownMenuContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} diff --git a/packages/design/src/components/dropdown/Dropdown.stories.tsx b/packages/design/src/components/dropdown/Dropdown.stories.tsx index 1521352fe3..57535b9b0f 100644 --- a/packages/design/src/components/dropdown/Dropdown.stories.tsx +++ b/packages/design/src/components/dropdown/Dropdown.stories.tsx @@ -16,6 +16,8 @@ import type { Meta } from '@storybook/react'; +import { borderClassName } from '../../helper/class-utilities'; +import { clsx } from '../../helper/clsx'; import { Dropdown } from './Dropdown'; const meta: Meta = { @@ -53,11 +55,10 @@ export const Playground = { )} > Click me diff --git a/packages/design/src/components/dropdown/PopoverPrimitive.tsx b/packages/design/src/components/dropdown/PopoverPrimitive.tsx index e76c91dae6..82fcd9dd48 100644 --- a/packages/design/src/components/dropdown/PopoverPrimitive.tsx +++ b/packages/design/src/components/dropdown/PopoverPrimitive.tsx @@ -16,8 +16,8 @@ import type { ComponentProps } from 'react'; import { Anchor, Content, Portal, Root, Trigger } from '@radix-ui/react-popover'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; function PopoverPrimitive({ ...props @@ -46,9 +46,8 @@ function PopoverContent({ className={clsx( ` univer-z-[1080] univer-max-h-[var(--radix-popper-available-height)] univer-overflow-y-auto - univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white - univer-text-gray-900 univer-shadow-md univer-outline-hidden - dark:univer-border-gray-600 dark:univer-bg-gray-900 + univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md univer-outline-hidden + dark:univer-bg-gray-900 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 @@ -58,6 +57,7 @@ function PopoverContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} diff --git a/packages/design/src/components/input-number/InputNumber.tsx b/packages/design/src/components/input-number/InputNumber.tsx index 8add45ffaf..ee921312b8 100644 --- a/packages/design/src/components/input-number/InputNumber.tsx +++ b/packages/design/src/components/input-number/InputNumber.tsx @@ -331,6 +331,7 @@ export const InputNumber = forwardRef( univer-h-[calc(100%-2px)] univer-w-6 univer-flex-col univer-border univer-border-y-0 univer-border-l univer-border-r-0 univer-border-solid univer-border-gray-200 univer-border-l-gray-200 + dark:univer-border-gray-600 `, controlsClassName )} @@ -341,6 +342,7 @@ export const InputNumber = forwardRef( univer-border-none !univer-bg-transparent univer-text-xs after:univer-absolute after:-univer-bottom-px after:univer-block after:univer-h-px after:univer-w-full after:univer-bg-gray-200 after:univer-content-[''] + dark:after:univer-bg-gray-600 `} tabIndex={-1} disabled={disabled || (max !== undefined && internalValue !== null && internalValue >= max)} diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx index d29d77e1ee..c3a0dfda78 100644 --- a/packages/design/src/components/input/Input.tsx +++ b/packages/design/src/components/input/Input.tsx @@ -18,15 +18,15 @@ import type { VariantProps } from 'class-variance-authority'; import { CloseSingle } from '@univerjs/icons'; import { cva } from 'class-variance-authority'; import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; type InputProps = React.InputHTMLAttributes; export const inputVariants = cva( ` - univer-box-border univer-w-full univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-transition-colors univer-duration-200 - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 + dark:univer-bg-gray-700 dark:univer-text-white focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-600/20 placeholder:univer-text-gray-400 `, @@ -131,6 +131,7 @@ export const Input = forwardRef( type={type} className={clsx( inputVariants({ size }), + borderClassName, disabled && ` univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400 dark:univer-text-gray-500 diff --git a/packages/design/src/components/kbd/Kbd.tsx b/packages/design/src/components/kbd/Kbd.tsx index 51727543ee..0e57fe3459 100644 --- a/packages/design/src/components/kbd/Kbd.tsx +++ b/packages/design/src/components/kbd/Kbd.tsx @@ -15,6 +15,7 @@ */ import { Fragment } from 'react/jsx-runtime'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; export interface IKBDProps { @@ -30,11 +31,10 @@ export function KBD(props: IKBDProps) { return ( {keys.map((text, index) => ( diff --git a/packages/design/src/components/menu/Menu.tsx b/packages/design/src/components/menu/Menu.tsx index 0eec727d89..c46976f725 100644 --- a/packages/design/src/components/menu/Menu.tsx +++ b/packages/design/src/components/menu/Menu.tsx @@ -76,13 +76,14 @@ export function TinyMenuGroup({ items }: ITinyMenuGroupProps) { const ele = (
item.onClick()} > diff --git a/packages/design/src/components/message/Message.tsx b/packages/design/src/components/message/Message.tsx index 168e2f12b7..3b3b37c65c 100644 --- a/packages/design/src/components/message/Message.tsx +++ b/packages/design/src/components/message/Message.tsx @@ -61,7 +61,7 @@ const Message = ({ content, type = MessageType.Info }: IMessageProps) => { univer-min-w-[320px] univer-max-w-[480px] univer-rounded-xl univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-4 univer-font-sans univer-shadow-md univer-transition-all univer-duration-300 univer-animate-in univer-fade-in univer-slide-in-from-top-4 - dark:univer-border-gray-700 dark:univer-bg-gray-700 + dark:univer-border-gray-600 dark:univer-bg-gray-700 ` )} > diff --git a/packages/design/src/components/select-list/SelectList.tsx b/packages/design/src/components/select-list/SelectList.tsx index ff9ca1911f..f12859187f 100644 --- a/packages/design/src/components/select-list/SelectList.tsx +++ b/packages/design/src/components/select-list/SelectList.tsx @@ -15,8 +15,8 @@ */ import { CheckMarkSingle } from '@univerjs/icons'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; export interface ISelectListProps { /** @@ -85,8 +85,8 @@ export function SelectList(props: ISelectListProps) {