feat: added default size to Panel and remove default title #910
Conversation
Signed-off-by: Vidit Kushwaha <viditkushwaha530@gmail.com>
| <SistentThemeProviderWithoutBaseLine initialMode={mode}> | ||
| <Draggable handle=".drag-handle"> | ||
| <PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}> | ||
| <Resizable | ||
| defaultSize={{ | ||
| width: defaultSize?.width || '18rem', | ||
| height: defaultSize?.height || 'auto' | ||
| }} | ||
| onResize={() => { | ||
| window.dispatchEvent(new Event('panel-resize')); | ||
| }} | ||
| enable={{ | ||
| top: true, | ||
| right: true, | ||
| bottom: true, | ||
| left: true, | ||
| topRight: true, | ||
| bottomRight: true, | ||
| bottomLeft: true, | ||
| topLeft: true | ||
| }} | ||
| > | ||
| <ResizableContent> | ||
| <ErrorBoundary> | ||
| <div className="drag-handle"> | ||
| <DrawerHeader> | ||
| <Box display="flex" justifyContent="flex-end" padding="8px"> | ||
| {toggleExpandAll && ( | ||
| <Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}> | ||
| <CustomIconButton onClick={toggleExpandAll}> | ||
| {areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />} | ||
| </CustomIconButton> | ||
| </Tooltip> | ||
| )} | ||
| </Box> | ||
| <DragHandle /> | ||
| <HeaderContainer> | ||
| <HeaderActionsContainer | ||
| id={`${id}-panel-header-actions-container`} | ||
| ></HeaderActionsContainer> | ||
| <PanelTitle>{title}</PanelTitle> | ||
| {minimizePanel && ( | ||
| <CustomIconButton onClick={minimizePanel}> | ||
| <FullScreenIcon fill={theme.palette.common.white} /> | ||
| </CustomIconButton> | ||
| </Tooltip> | ||
| )} | ||
| </Box> | ||
| <DragHandle /> | ||
| <HeaderContainer> | ||
| <HeaderActionsContainer | ||
| id={`${id}-panel-header-actions-container`} | ||
| ></HeaderActionsContainer> | ||
| <PanelTitle>{title}</PanelTitle> | ||
| {minimizePanel && ( | ||
| <CustomIconButton onClick={minimizePanel}> | ||
| <FullScreenIcon fill={theme.palette.common.white} /> | ||
| )} | ||
| <CustomIconButton onClick={handleClose}> | ||
| <CloseIcon fill={theme.palette.common.white} /> | ||
| </CustomIconButton> | ||
| )} | ||
| <CustomIconButton onClick={handleClose}> | ||
| <CloseIcon fill={theme.palette.common.white} /> | ||
| </CustomIconButton> | ||
| </HeaderContainer> | ||
| </DrawerHeader> | ||
| </div> | ||
| <PanelBody className="panel-body">{children}</PanelBody> | ||
| </ErrorBoundary> | ||
| </ResizableContent> | ||
| </Resizable> | ||
| </PanelContainer> | ||
| </Draggable> | ||
| </HeaderContainer> | ||
| </DrawerHeader> | ||
| </div> | ||
| <PanelBody className="panel-body" theme={theme}> | ||
| {children} | ||
| </PanelBody> | ||
| </ErrorBoundary> | ||
| </ResizableContent> | ||
| </Resizable> | ||
| </PanelContainer> | ||
| </Draggable> | ||
| </SistentThemeProviderWithoutBaseLine> |
There was a problem hiding this comment.
I think you don't need to add the SistentThemeProviderWithoutBaseLine
There was a problem hiding this comment.
Check if it doesn't required than remove it.
There was a problem hiding this comment.
You created 3 PR in sistent for migrating the panel component. This is the reason why I suggested you create a PR of meshery-extensions first and after that create a PR in sistent so no need to go back and forth with the small changes.
There was a problem hiding this comment.
is it required SistentThemeProviderWithoutBaseLine? @Vidit-Kushwaha
There was a problem hiding this comment.
I have to test it again. I will let you know whether it is requested or not.
|
One more request before I merge this PR. Can you create a documentation for the newly added panel component here -> https://layer5.io/projects/sistent |
|
Sure I will add a document component in layer5 |
|
It is okay if you don't add now there is more important work is in your plate compared to adding documentation. Just confirm one thing that I asked eariler. |
Notes for Reviewers
This PR added feature of default size in panel and removed the default title from component
Signed commits