UltiSuite/ultisuite-client
UltiSuite/ultisuite-client
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(drive): refine select trigger styles in rich text editor
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
Details

Browse Source 
- Updated select trigger components for paragraph style and font family to include a ghost variant for improved visual consistency.
- Adjusted CSS styles to standardize height and padding, enhancing the overall appearance of select elements.
- Improved hover and focus states for better user interaction feedback across different themes.
This commit is contained in:
R3D347HR4Y 2026-06-15 18:03:02 +02:00
parent 580f843e4c
commit 770669424e
3 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/drive/richtext/docs-paragraph-style-ui.tsx
View File

@ -46,8 +46,9 @@ export function DocsParagraphStyleSelect({
return ( return (
<Select disabled={disabled} value={value} onValueChange={onValueChange}> <Select disabled={disabled} value={value} onValueChange={onValueChange}>
<SelectTrigger <SelectTrigger
variant="ghost"
className={cn( className={cn(
"docs-toolbar-select docs-toolbar-select--style h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 shadow-none", "docs-toolbar-select docs-toolbar-select--style h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 py-0 shadow-none",
triggerClassName triggerClassName
)} )}
> >

3
components/drive/richtext/docs-toolbar.tsx
View File

@ -274,7 +274,8 @@ function DocsToolbarInner({
}} }}
> >
<SelectTrigger <SelectTrigger
className="docs-toolbar-select docs-toolbar-select--font-family h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 shadow-none" variant="ghost"
className="docs-toolbar-select docs-toolbar-select--font-family h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 py-0 shadow-none"
style={ style={
fontFamilyState.kind === "single" fontFamilyState.kind === "single"
? { ? {

34
styles/richtext-editor.css
View File

@ -1046,29 +1046,37 @@ html.dark .docs-menu-badge {
.docs-toolbar-select--style, .docs-toolbar-select--style,
.docs-toolbar-select--font-family { .docs-toolbar-select--font-family {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding-block: 0 !important;
border-radius: 4px; border-radius: 4px;
} }
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover, .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover:not(:disabled),
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible, .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover:not(:disabled),
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"], .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"]:not(:disabled),
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover, .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"]:not(:disabled) {
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible, background: #d3e3fd !important;
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
background: #e8eaed !important;
box-shadow: none !important; box-shadow: none !important;
} }
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover, .dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover:not(:disabled),
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible, .dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover:not(:disabled),
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"], .dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"]:not(:disabled),
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover, .dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"]:not(:disabled) {
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible,
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
background: #444746 !important; background: #444746 !important;
box-shadow: none !important; box-shadow: none !important;
} }
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible:not([data-state="open"]),
.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible:not([data-state="open"]),
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible:not([data-state="open"]),
.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible:not([data-state="open"]) {
background: transparent !important;
box-shadow: none !important;
}
.docs-toolbar-select [data-slot="select-value"] { .docs-toolbar-select [data-slot="select-value"] {
color: inherit; color: inherit;
} }