style: Fix sheet style (#292)

* style: Fix sheet style Signed-off-by: yazhou <[email protected]> * ci: Add changeset Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
kubesphere · Aug 6, 2024 · ccb568f · ccb568f
1 parent e878027
commit ccb568f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 22 deletions.
diff --git a/.changeset/wicked-beans-peel.md b/.changeset/wicked-beans-peel.md
@@ -0,0 +1,13 @@
+---
+'@kubed/code-editor': patch
+'@kubed/diff-viewer': patch
+'@kubed/components': patch
+'@kubed/log-viewer': patch
+'@kubed/charts': patch
+'@kubed/hooks': patch
+'@kubed/icons': patch
+'@kubed/tests': patch
+'kubed-documents': patch
+---
+
+style: Update sheet style
diff --git a/packages/components/src/Sheet/Sheet.styles.ts b/packages/components/src/Sheet/Sheet.styles.ts
@@ -3,6 +3,13 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import classNames from 'classnames';
 
 import { addColorAlpha } from '../utils/color';
+import { Field } from '../index';
+
+export const FieldWrapper = styled(Field).attrs({
+  className: 'kubed-sheet-header-field',
+})`
+  min-height: 40px;
+`;
 
 const fadeIn = keyframes`
   from { opacity: 0; }

diff --git a/packages/components/src/Sheet/Sheets.tsx b/packages/components/src/Sheet/Sheets.tsx
@@ -13,8 +13,9 @@ import {
   StyledHeaderClose,
   HeaderWrapper,
   HiddenTitle,
+  FieldWrapper as Field,
 } from './Sheet.styles';
-import { Button, Field } from '../index';
+import { Button } from '../index';
 
 const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
@@ -65,32 +66,56 @@ export interface SheetContentProps
   title?: string;
   /** The accessible description of the SheetContent. */
   description?: string;
+  /** Whether the SheetContent has overlay. */
+  hasOverlay?: boolean;
 }
 
+const SheetBaseContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(
+  (
+    { side = 'right', hasOverlay = true, className, children, title, description, ...props },
+    ref
+  ) => (
+    <SheetPortal>
+      {hasOverlay && <SheetOverlay />}
+      <StyledSheetContent ref={ref} side={side} className={className} {...props}>
+        {children}
+      </StyledSheetContent>
+    </SheetPortal>
+  )
+);
+
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = 'right', className, children, title, description, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <StyledSheetContent ref={ref} side={side} className={className} {...props}>
-      <HiddenTitle>
-        <SheetPrimitive.Title>{title ?? 'sheet'}</SheetPrimitive.Title>
-      </HiddenTitle>
-      <HiddenTitle>
-        <SheetPrimitive.Description>
-          {description ?? 'sheet description'}
-        </SheetPrimitive.Description>
-      </HiddenTitle>
-      <SheetHeaderClose asChild>
-        <Button variant="filled" color="secondary" radius="sm" size="sm">
-          <CloseDuotone size={24} variant="light" />
-        </Button>
-      </SheetHeaderClose>
-      {children}
-    </StyledSheetContent>
-  </SheetPortal>
-));
+>(
+  (
+    { side = 'right', hasOverlay = true, className, children, title, description, ...props },
+    ref
+  ) => (
+    <SheetPortal>
+      {hasOverlay && <SheetOverlay />}
+      <StyledSheetContent ref={ref} side={side} className={className} {...props}>
+        <HiddenTitle>
+          <SheetPrimitive.Title>{title ?? 'sheet'}</SheetPrimitive.Title>
+        </HiddenTitle>
+        <HiddenTitle>
+          <SheetPrimitive.Description>
+            {description ?? 'sheet description'}
+          </SheetPrimitive.Description>
+        </HiddenTitle>
+        <SheetHeaderClose asChild>
+          <Button variant="filled" color="secondary" radius="sm" size="sm">
+            <CloseDuotone size={24} variant="light" />
+          </Button>
+        </SheetHeaderClose>
+        {children}
+      </StyledSheetContent>
+    </SheetPortal>
+  )
+);
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <StyledSheetHeader {...props} className={className} />
@@ -136,4 +161,5 @@ export {
   SheetDescription,
   SheetHeaderClose,
   SheetFieldTitle,
+  SheetBaseContent,
 };