@orsetra/shared-ui 1.7.5 → 1.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26,9 +26,9 @@ interface PageWithSidePanelProps {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
const PANEL_WIDTHS = {
|
|
29
|
-
sm: "w-64",
|
|
30
|
-
md: "w-72",
|
|
31
|
-
lg: "w-80",
|
|
29
|
+
sm: "w-56 lg:w-64",
|
|
30
|
+
md: "w-64 lg:w-72",
|
|
31
|
+
lg: "w-72 lg:w-80",
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export function PageWithSidePanel({
|
|
@@ -70,7 +70,7 @@ export function PageWithSidePanel({
|
|
|
70
70
|
{/* Content header — sticks at the top of the scroll container */}
|
|
71
71
|
{contentHeader && (
|
|
72
72
|
<div className={cn(
|
|
73
|
-
"flex sticky top-0 z-10 bg-white h-14 flex-shrink-0 items-center justify-between px-4 border-b border-
|
|
73
|
+
"flex sticky top-0 z-10 bg-white h-14 flex-shrink-0 items-center justify-between px-4 border-b border-ui-border",
|
|
74
74
|
contentHeaderClassName
|
|
75
75
|
)}>
|
|
76
76
|
{contentHeader}
|
|
@@ -89,7 +89,7 @@ export function PageWithSidePanel({
|
|
|
89
89
|
<div
|
|
90
90
|
className={cn(
|
|
91
91
|
"hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width] duration-300 ease-in-out",
|
|
92
|
-
isOpen && showBorder && "border-l border-
|
|
92
|
+
isOpen && showBorder && "border-l border-ui-border",
|
|
93
93
|
isOpen ? panelWidthClass : "w-0",
|
|
94
94
|
sidePanelClassName
|
|
95
95
|
)}
|
|
@@ -100,7 +100,7 @@ export function PageWithSidePanel({
|
|
|
100
100
|
{/* Panel header */}
|
|
101
101
|
{(sidePanelHeader || closable) && (
|
|
102
102
|
<div className={cn(
|
|
103
|
-
"flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-
|
|
103
|
+
"flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ui-border",
|
|
104
104
|
sidePanelHeaderClassName
|
|
105
105
|
)}>
|
|
106
106
|
<div className="flex-1 min-w-0">
|
|
@@ -130,7 +130,7 @@ export function PageWithSidePanel({
|
|
|
130
130
|
{closable && !isOpen && (
|
|
131
131
|
<button
|
|
132
132
|
onClick={handleOpen}
|
|
133
|
-
className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-
|
|
133
|
+
className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ui-border border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
|
|
134
134
|
aria-label="Open side panel"
|
|
135
135
|
>
|
|
136
136
|
<ChevronLeft className="h-4 w-4 text-ibm-gray-70" />
|
|
@@ -143,7 +143,7 @@ export function PageWithSidePanel({
|
|
|
143
143
|
<div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
|
|
144
144
|
<div className="relative ml-auto flex flex-col bg-white shadow-xl h-full w-80 max-w-[90vw]">
|
|
145
145
|
<div className={cn(
|
|
146
|
-
"flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-
|
|
146
|
+
"flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ui-border",
|
|
147
147
|
sidePanelHeaderClassName
|
|
148
148
|
)}>
|
|
149
149
|
<div className="flex-1 min-w-0">{sidePanelHeader}</div>
|
|
@@ -50,7 +50,7 @@ const SidePanel = ({
|
|
|
50
50
|
children,
|
|
51
51
|
actions,
|
|
52
52
|
side = "right",
|
|
53
|
-
width = "max-w-lg",
|
|
53
|
+
width = "w-full sm:max-w-md lg:max-w-lg",
|
|
54
54
|
onClose,
|
|
55
55
|
}: SidePanelProps) => {
|
|
56
56
|
return (
|
|
@@ -61,20 +61,20 @@ const SidePanel = ({
|
|
|
61
61
|
className={cn(
|
|
62
62
|
"fixed z-50 bg-white shadow-lg !translate-x-0 !translate-y-0 transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
|
|
63
63
|
side === "right" &&
|
|
64
|
-
"inset-y-0 right-0 h-full
|
|
64
|
+
"inset-y-0 right-0 h-full border-l border-ui-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
65
65
|
side === "left" &&
|
|
66
|
-
"inset-y-0 left-0 h-full
|
|
66
|
+
"inset-y-0 left-0 h-full border-r border-ui-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
67
67
|
width
|
|
68
68
|
)}
|
|
69
69
|
>
|
|
70
70
|
{/* Header fixe */}
|
|
71
|
-
<div className="flex items-center justify-between px-6 py-4 flex-shrink-0">
|
|
71
|
+
<div className="flex items-center justify-between px-4 md:px-6 py-3 md:py-4 flex-shrink-0 border-b border-ui-border">
|
|
72
72
|
<div className="flex-1">
|
|
73
|
-
<DialogPrimitive.Title className="text-lg font-semibold text-ibm-gray-100">
|
|
73
|
+
<DialogPrimitive.Title className="text-base md:text-lg font-semibold text-ibm-gray-100">
|
|
74
74
|
{title}
|
|
75
75
|
</DialogPrimitive.Title>
|
|
76
76
|
{description && (
|
|
77
|
-
<DialogPrimitive.Description className="text-sm text-ibm-gray-60">
|
|
77
|
+
<DialogPrimitive.Description className="text-xs md:text-sm text-ibm-gray-60">
|
|
78
78
|
{description}
|
|
79
79
|
</DialogPrimitive.Description>
|
|
80
80
|
)}
|
|
@@ -88,18 +88,18 @@ const SidePanel = ({
|
|
|
88
88
|
className="rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ibm-blue-60 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-ibm-gray-10"
|
|
89
89
|
onClick={onClose}
|
|
90
90
|
>
|
|
91
|
-
<X className="h-5 w-5 text-ibm-gray-70" />
|
|
91
|
+
<X className="h-4 w-4 md:h-5 md:w-5 text-ibm-gray-70" />
|
|
92
92
|
<span className="sr-only">Close</span>
|
|
93
93
|
</DialogPrimitive.Close>
|
|
94
94
|
</div>
|
|
95
95
|
|
|
96
96
|
{/* Body scrollable */}
|
|
97
|
-
<div className="flex-1 overflow-y-auto px-6 py-6">
|
|
97
|
+
<div className="flex-1 overflow-y-auto px-4 md:px-6 py-4 md:py-6">
|
|
98
98
|
{children}
|
|
99
99
|
</div>
|
|
100
100
|
|
|
101
101
|
{/* Footer fixe */}
|
|
102
|
-
<div className="flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0">
|
|
102
|
+
<div className="flex items-center justify-end gap-3 px-4 md:px-6 py-3 md:py-4 flex-shrink-0 border-t border-ui-border">
|
|
103
103
|
{actions}
|
|
104
104
|
</div>
|
|
105
105
|
</DialogPrimitive.Content>
|
|
@@ -118,7 +118,7 @@ interface SidePanelContentProps
|
|
|
118
118
|
const SidePanelContent = React.forwardRef<
|
|
119
119
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
120
120
|
SidePanelContentProps
|
|
121
|
-
>(({ side = "right", width = "max-w-lg", className, children, ...props }, ref) => (
|
|
121
|
+
>(({ side = "right", width = "w-full sm:max-w-md lg:max-w-lg", className, children, ...props }, ref) => (
|
|
122
122
|
<SidePanelPortal>
|
|
123
123
|
<SidePanelOverlay />
|
|
124
124
|
<DialogPrimitive.Content
|
|
@@ -126,9 +126,9 @@ const SidePanelContent = React.forwardRef<
|
|
|
126
126
|
className={cn(
|
|
127
127
|
"fixed z-50 bg-white shadow-lg !translate-x-0 !translate-y-0 transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
|
|
128
128
|
side === "right" &&
|
|
129
|
-
"inset-y-0 right-0 h-full
|
|
129
|
+
"inset-y-0 right-0 h-full border-l border-ui-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
130
130
|
side === "left" &&
|
|
131
|
-
"inset-y-0 left-0 h-full
|
|
131
|
+
"inset-y-0 left-0 h-full border-r border-ui-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
132
132
|
width,
|
|
133
133
|
className
|
|
134
134
|
)}
|
|
@@ -147,7 +147,7 @@ const SidePanelHeader = React.forwardRef<
|
|
|
147
147
|
<div
|
|
148
148
|
ref={ref}
|
|
149
149
|
className={cn(
|
|
150
|
-
"flex items-center justify-between px-6 py-4 flex-shrink-0",
|
|
150
|
+
"flex items-center justify-between px-4 md:px-6 py-3 md:py-4 flex-shrink-0 border-b border-ui-border",
|
|
151
151
|
className
|
|
152
152
|
)}
|
|
153
153
|
{...props}
|
|
@@ -161,7 +161,7 @@ const SidePanelTitle = React.forwardRef<
|
|
|
161
161
|
>(({ className, ...props }, ref) => (
|
|
162
162
|
<DialogPrimitive.Title
|
|
163
163
|
ref={ref}
|
|
164
|
-
className={cn("text-lg font-semibold text-ibm-gray-100", className)}
|
|
164
|
+
className={cn("text-base md:text-lg font-semibold text-ibm-gray-100", className)}
|
|
165
165
|
{...props}
|
|
166
166
|
/>
|
|
167
167
|
))
|
|
@@ -173,7 +173,7 @@ const SidePanelDescription = React.forwardRef<
|
|
|
173
173
|
>(({ className, ...props }, ref) => (
|
|
174
174
|
<DialogPrimitive.Description
|
|
175
175
|
ref={ref}
|
|
176
|
-
className={cn("text-sm text-ibm-gray-60", className)}
|
|
176
|
+
className={cn("text-xs md:text-sm text-ibm-gray-60", className)}
|
|
177
177
|
{...props}
|
|
178
178
|
/>
|
|
179
179
|
))
|
|
@@ -185,7 +185,7 @@ const SidePanelBody = React.forwardRef<
|
|
|
185
185
|
>(({ className, ...props }, ref) => (
|
|
186
186
|
<div
|
|
187
187
|
ref={ref}
|
|
188
|
-
className={cn("flex-1 overflow-y-auto px-6 py-6", className)}
|
|
188
|
+
className={cn("flex-1 overflow-y-auto px-4 md:px-6 py-4 md:py-6", className)}
|
|
189
189
|
{...props}
|
|
190
190
|
/>
|
|
191
191
|
))
|
|
@@ -198,7 +198,7 @@ const SidePanelFooter = React.forwardRef<
|
|
|
198
198
|
<div
|
|
199
199
|
ref={ref}
|
|
200
200
|
className={cn(
|
|
201
|
-
"flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0",
|
|
201
|
+
"flex items-center justify-end gap-3 px-4 md:px-6 py-3 md:py-4 flex-shrink-0 border-t border-ui-border",
|
|
202
202
|
className
|
|
203
203
|
)}
|
|
204
204
|
{...props}
|