diff --git a/.changeset/wicked-beans-peel.md b/.changeset/wicked-beans-peel.md new file mode 100644 index 00000000..021fd1db --- /dev/null +++ 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 index b7233f44..38c558f0 100644 --- 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 index fe6e1c02..87eee9eb 100644 --- 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, + SheetContentProps +>( + ( + { side = 'right', hasOverlay = true, className, children, title, description, ...props }, + ref + ) => ( + + {hasOverlay && } + + {children} + + + ) +); + const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps ->(({ side = 'right', className, children, title, description, ...props }, ref) => ( - - - - - {title ?? 'sheet'} - - - - {description ?? 'sheet description'} - - - - - - {children} - - -)); +>( + ( + { side = 'right', hasOverlay = true, className, children, title, description, ...props }, + ref + ) => ( + + {hasOverlay && } + + + {title ?? 'sheet'} + + + + {description ?? 'sheet description'} + + + + + + {children} + + + ) +); const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => ( @@ -136,4 +161,5 @@ export { SheetDescription, SheetHeaderClose, SheetFieldTitle, + SheetBaseContent, };