Skip to content

Commit 5b40b9d

Browse files
shadcnshadcn
authored
Revert "feat: update customizer (#10129)" (#10130)
This reverts commit e327cef.
1 parent e327cef commit 5b40b9d

21 files changed

+265
-922
lines changed

‎apps/v4/app/(create)/components/accent-picker.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
"use client"
22

33
import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
4-
import { useCustomizerLayout } from "@/app/(create)/components/customizer-layout"
54
import { LockButton } from "@/app/(create)/components/lock-button"
65
import {
76
Picker,
87
PickerContent,
98
PickerGroup,
109
PickerRadioGroup,
1110
PickerRadioItem,
12-
PickerValueTrigger,
11+
PickerTrigger,
1312
} from "@/app/(create)/components/picker"
1413
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
1514

1615
export function MenuAccentPicker({
1716
isMobile,
1817
anchorRef,
19-
collapsed = false,
2018
}: {
2119
isMobile: boolean
2220
anchorRef: React.RefObject<HTMLDivElement | null>
23-
collapsed?: boolean
2421
}) {
2522
const [params, setParams] = useDesignSystemSearchParams()
26-
const { desktopPickerSide } = useCustomizerLayout()
2723

2824
const currentAccent = MENU_ACCENTS.find(
2925
(accent) => accent.value === params.menuAccent
@@ -32,11 +28,14 @@ export function MenuAccentPicker({
3228
return (
3329
<div className="group/picker relative pr-3 md:pr-0">
3430
<Picker>
35-
<PickerValueTrigger
36-
label="Menu Accent"
37-
value={currentAccent?.label}
38-
valueText={currentAccent?.label}
39-
indicator={
31+
<PickerTrigger>
32+
<div className="flex flex-col justify-start text-left">
33+
<div className="text-xs text-muted-foreground">Menu Accent</div>
34+
<div className="text-sm font-medium text-foreground">
35+
{currentAccent?.label}
36+
</div>
37+
</div>
38+
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
4039
<svg
4140
xmlns="http://www.w3.org/2000/svg"
4241
width="128"
@@ -64,12 +63,11 @@ export function MenuAccentPicker({
6463
className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
6564
></path>
6665
</svg>
67-
}
68-
collapsed={collapsed}
69-
/>
66+
</div>
67+
</PickerTrigger>
7068
<PickerContent
7169
anchor={isMobile ? anchorRef : undefined}
72-
side={isMobile ? "top" : desktopPickerSide}
70+
side={isMobile ? "top" : "right"}
7371
align={isMobile ? "center" : "start"}
7472
>
7573
<PickerRadioGroup
@@ -97,12 +95,10 @@ export function MenuAccentPicker({
9795
</PickerRadioGroup>
9896
</PickerContent>
9997
</Picker>
100-
{!collapsed ? (
101-
<LockButton
102-
param="menuAccent"
103-
className="absolute top-1/2 right-8 -translate-y-1/2"
104-
/>
105-
) : null}
98+
<LockButton
99+
param="menuAccent"
100+
className="absolute top-1/2 right-8 -translate-y-1/2"
101+
/>
106102
</div>
107103
)
108104
}

‎apps/v4/app/(create)/components/base-color-picker.tsx‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,57 @@ import * as React from "react"
44

55
import { useMounted } from "@/hooks/use-mounted"
66
import { BASE_COLORS, type BaseColorName } from "@/registry/config"
7-
import { useCustomizerLayout } from "@/app/(create)/components/customizer-layout"
87
import { LockButton } from "@/app/(create)/components/lock-button"
98
import {
109
Picker,
1110
PickerContent,
1211
PickerGroup,
1312
PickerRadioGroup,
1413
PickerRadioItem,
15-
PickerValueTrigger,
14+
PickerTrigger,
1615
} from "@/app/(create)/components/picker"
1716
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
1817

1918
export function BaseColorPicker({
2019
isMobile,
2120
anchorRef,
22-
collapsed = false,
2321
}: {
2422
isMobile: boolean
2523
anchorRef: React.RefObject<HTMLDivElement | null>
26-
collapsed?: boolean
2724
}) {
2825
const mounted = useMounted()
2926
const [params, setParams] = useDesignSystemSearchParams()
30-
const { desktopPickerSide } = useCustomizerLayout()
3127

3228
const currentBaseColor = React.useMemo(
3329
() => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
3430
[params.baseColor]
3531
)
36-
const baseColorIndicator = mounted ? (
37-
<div
38-
style={
39-
{
40-
"--color": currentBaseColor?.cssVars?.dark?.["muted-foreground"],
41-
} as React.CSSProperties
42-
}
43-
className="size-4 rounded-full bg-(--color)"
44-
/>
45-
) : null
4632

4733
return (
4834
<div className="group/picker relative">
4935
<Picker>
50-
<PickerValueTrigger
51-
label="Base Color"
52-
value={currentBaseColor?.title}
53-
valueText={currentBaseColor?.title}
54-
indicator={baseColorIndicator}
55-
collapsed={collapsed}
56-
/>
36+
<PickerTrigger>
37+
<div className="flex flex-col justify-start text-left">
38+
<div className="text-xs text-muted-foreground">Base Color</div>
39+
<div className="text-sm font-medium text-foreground">
40+
{currentBaseColor?.title}
41+
</div>
42+
</div>
43+
{mounted && (
44+
<div
45+
style={
46+
{
47+
"--color":
48+
currentBaseColor?.cssVars?.dark?.["muted-foreground"],
49+
} as React.CSSProperties
50+
}
51+
className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
52+
/>
53+
)}
54+
</PickerTrigger>
5755
<PickerContent
5856
anchor={isMobile ? anchorRef : undefined}
59-
side={isMobile ? "top" : desktopPickerSide}
57+
side={isMobile ? "top" : "right"}
6058
align={isMobile ? "center" : "start"}
6159
>
6260
<PickerRadioGroup
@@ -79,12 +77,10 @@ export function BaseColorPicker({
7977
</PickerRadioGroup>
8078
</PickerContent>
8179
</Picker>
82-
{!collapsed ? (
83-
<LockButton
84-
param="baseColor"
85-
className="absolute top-1/2 right-8 -translate-y-1/2"
86-
/>
87-
) : null}
80+
<LockButton
81+
param="baseColor"
82+
className="absolute top-1/2 right-8 -translate-y-1/2"
83+
/>
8884
</div>
8985
)
9086
}

‎apps/v4/app/(create)/components/base-picker.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import * as React from "react"
44

55
import { BASES } from "@/registry/config"
6-
import { useCustomizerLayout } from "@/app/(create)/components/customizer-layout"
76
import {
87
Picker,
98
PickerContent,
@@ -22,7 +21,6 @@ export function BasePicker({
2221
anchorRef: React.RefObject<HTMLDivElement | null>
2322
}) {
2423
const [params, setParams] = useDesignSystemSearchParams()
25-
const { desktopPickerSide } = useCustomizerLayout()
2624

2725
const currentBase = React.useMemo(
2826
() => BASES.find((base) => base.name === params.base),
@@ -62,7 +60,7 @@ export function BasePicker({
6260
</PickerTrigger>
6361
<PickerContent
6462
anchor={isMobile ? anchorRef : undefined}
65-
side={isMobile ? "top" : desktopPickerSide}
63+
side={isMobile ? "top" : "right"}
6664
align={isMobile ? "center" : "start"}
6765
>
6866
<PickerRadioGroup

‎apps/v4/app/(create)/components/chart-color-picker.tsx‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
getThemesForBaseColor,
99
type ChartColorName,
1010
} from "@/registry/config"
11-
import { useCustomizerLayout } from "@/app/(create)/components/customizer-layout"
1211
import { LockButton } from "@/app/(create)/components/lock-button"
1312
import {
1413
Picker,
@@ -17,22 +16,19 @@ import {
1716
PickerRadioGroup,
1817
PickerRadioItem,
1918
PickerSeparator,
20-
PickerValueTrigger,
19+
PickerTrigger,
2120
} from "@/app/(create)/components/picker"
2221
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
2322

2423
export function ChartColorPicker({
2524
isMobile,
2625
anchorRef,
27-
collapsed = false,
2826
}: {
2927
isMobile: boolean
3028
anchorRef: React.RefObject<HTMLDivElement | null>
31-
collapsed?: boolean
3229
}) {
3330
const mounted = useMounted()
3431
const [params, setParams] = useDesignSystemSearchParams()
35-
const { desktopPickerSide } = useCustomizerLayout()
3632

3733
const availableChartColors = React.useMemo(
3834
() => getThemesForBaseColor(params.baseColor),
@@ -56,33 +52,35 @@ export function ChartColorPicker({
5652
}
5753
}, [currentChartColor, availableChartColors, setParams])
5854

59-
const chartColorIndicator = mounted ? (
60-
<div
61-
style={
62-
{
63-
"--color":
64-
currentChartColor?.cssVars?.dark?.[
65-
currentChartColorIsBaseColor ? "muted-foreground" : "primary"
66-
],
67-
} as React.CSSProperties
68-
}
69-
className="size-4 rounded-full bg-(--color)"
70-
/>
71-
) : null
72-
7355
return (
7456
<div className="group/picker relative">
7557
<Picker>
76-
<PickerValueTrigger
77-
label="Chart Color"
78-
value={currentChartColor?.title}
79-
valueText={currentChartColor?.title}
80-
indicator={chartColorIndicator}
81-
collapsed={collapsed}
82-
/>
58+
<PickerTrigger>
59+
<div className="flex flex-col justify-start text-left">
60+
<div className="text-xs text-muted-foreground">Chart Color</div>
61+
<div className="text-sm font-medium text-foreground">
62+
{currentChartColor?.title}
63+
</div>
64+
</div>
65+
{mounted && (
66+
<div
67+
style={
68+
{
69+
"--color":
70+
currentChartColor?.cssVars?.dark?.[
71+
currentChartColorIsBaseColor
72+
? "muted-foreground"
73+
: "primary"
74+
],
75+
} as React.CSSProperties
76+
}
77+
className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
78+
/>
79+
)}
80+
</PickerTrigger>
8381
<PickerContent
8482
anchor={isMobile ? anchorRef : undefined}
85-
side={isMobile ? "top" : desktopPickerSide}
83+
side={isMobile ? "top" : "right"}
8684
align={isMobile ? "center" : "start"}
8785
className="max-h-92"
8886
>
@@ -129,12 +127,10 @@ export function ChartColorPicker({
129127
</PickerRadioGroup>
130128
</PickerContent>
131129
</Picker>
132-
{!collapsed ? (
133-
<LockButton
134-
param="chartColor"
135-
className="absolute top-1/2 right-8 -translate-y-1/2"
136-
/>
137-
) : null}
130+
<LockButton
131+
param="chartColor"
132+
className="absolute top-1/2 right-8 -translate-y-1/2"
133+
/>
138134
</div>
139135
)
140136
}

‎apps/v4/app/(create)/components/copy-preset.tsx‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,12 @@
22

33
import * as React from "react"
44
import { Button } from "@/examples/base/ui/button"
5-
import {
6-
Tooltip,
7-
TooltipContent,
8-
TooltipTrigger,
9-
} from "@/examples/base/ui/tooltip"
10-
import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"
11-
import { HugeiconsIcon } from "@hugeicons/react"
125

136
import { cn } from "@/lib/utils"
147
import { copyToClipboardWithMeta } from "@/components/copy-button"
158
import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
169

17-
export function CopyPreset({
18-
className,
19-
collapsed = false,
20-
}: React.ComponentProps<typeof Button> & {
21-
collapsed?: boolean
22-
}) {
10+
export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
2311
const presetCode = usePresetCode()
2412
const [hasCopied, setHasCopied] = React.useState(false)
2513

@@ -40,40 +28,6 @@ export function CopyPreset({
4028
setHasCopied(true)
4129
}, [presetCode])
4230

43-
const tooltipLabel = hasCopied
44-
? "Copied preset"
45-
: `Copy --preset ${presetCode}`
46-
47-
if (collapsed) {
48-
return (
49-
<Tooltip>
50-
<TooltipTrigger
51-
render={
52-
<Button
53-
variant="outline"
54-
size="icon"
55-
aria-label={tooltipLabel}
56-
onClick={handleCopy}
57-
className={cn(
58-
"size-10 touch-manipulation rounded-xl bg-transparent! transition-none select-none hover:bg-muted!",
59-
className
60-
)}
61-
/>
62-
}
63-
>
64-
<HugeiconsIcon
65-
icon={hasCopied ? Tick02Icon : Copy01Icon}
66-
strokeWidth={2}
67-
/>
68-
<span className="sr-only">{tooltipLabel}</span>
69-
</TooltipTrigger>
70-
<TooltipContent side="right" sideOffset={10}>
71-
{tooltipLabel}
72-
</TooltipContent>
73-
</Tooltip>
74-
)
75-
}
76-
7731
return (
7832
<Button
7933
variant="outline"

0 commit comments

Comments
 (0)