From 32aa184262b69268634d0acf3fd6f1d2ceed7b16 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 11:47:42 +0100 Subject: [PATCH 1/3] Move TreeView icons into the theme --- packages/toolpad-studio/src/theme.ts | 15 ++++++++++++++- .../toolpad/AppEditor/HierarchyExplorer/index.tsx | 9 +-------- .../PageEditor/QueriesExplorer/index.tsx | 7 ------- .../src/toolpad/AppEditor/PagesExplorer/index.tsx | 7 ------- .../src/toolpad/FunctionsEditor/index.tsx | 7 ------- 5 files changed, 15 insertions(+), 30 deletions(-) diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts index 9fed14e47f5..5ec3cd2b91e 100644 --- a/packages/toolpad-studio/src/theme.ts +++ b/packages/toolpad-studio/src/theme.ts @@ -1,10 +1,15 @@ import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; -import { tooltipClasses } from '@mui/material'; +import { styled, tooltipClasses } from '@mui/material'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import type {} from '@mui/x-data-grid/themeAugmentation'; import type {} from '@mui/x-data-grid-pro/themeAugmentation'; import type {} from '@mui/x-tree-view/themeAugmentation'; +const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); + declare module '@mui/material/styles/createPalette' { interface ColorRange { 50: string; @@ -923,6 +928,14 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen size: 'small', }, }, + MuiSimpleTreeView: { + defaultProps: { + slots: { + collapseIcon: CollapseIcon, + expandIcon: ExpandIcon, + }, + }, + }, }, }; } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx index f3f9ffec620..78d0011d22f 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import { NodeId } from '@toolpad/studio-runtime'; -import { Box, Typography, styled } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import { SimpleTreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import useBoolean from '@toolpad/utils/hooks/useBoolean'; import * as appDom from '@toolpad/studio-runtime/appDom'; import { useAppState, useDomApi, useAppStateApi } from '../../AppState'; @@ -13,9 +11,6 @@ import { removePageLayoutNode } from '../pageLayout'; import EditableTreeItem from '../../../components/EditableTreeItem'; import ExplorerHeader from '../ExplorerHeader'; -const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); - export interface CustomTreeItemProps extends TreeItemProps { ref?: React.RefObject; node: appDom.ElementNode; @@ -220,8 +215,6 @@ export default function HierarchyExplorer() { ({ @@ -339,8 +334,6 @@ export default function FunctionsEditor() { ref={handlerTreeRef} selectedItems={selectedNodeId} onSelectedItemsChange={handleSelectFunction} - // TODO: This belongs as a default property in the theme - slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }} expandedItems={expanded} onExpandedItemsChange={(_event, itemIds) => setExpanded(itemIds)} sx={{ From cad71ecf302e9ee35cf7cee46aa81fa5e6a72ddd Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 15:16:35 +0100 Subject: [PATCH 2/3] freg --- .../toolpad-studio/src/components/icons/treeView.tsx | 11 +++++++++++ packages/toolpad-studio/src/theme.ts | 8 ++------ 2 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 packages/toolpad-studio/src/components/icons/treeView.tsx diff --git a/packages/toolpad-studio/src/components/icons/treeView.tsx b/packages/toolpad-studio/src/components/icons/treeView.tsx new file mode 100644 index 00000000000..1e194a9e0cb --- /dev/null +++ b/packages/toolpad-studio/src/components/icons/treeView.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; + +export function CollapseIcon() { + return ; +} + +export function ExpandIcon() { + return ; +} diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts index 5ec3cd2b91e..ae975564a0e 100644 --- a/packages/toolpad-studio/src/theme.ts +++ b/packages/toolpad-studio/src/theme.ts @@ -1,14 +1,10 @@ import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; -import { styled, tooltipClasses } from '@mui/material'; +import { tooltipClasses } from '@mui/material'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import type {} from '@mui/x-data-grid/themeAugmentation'; import type {} from '@mui/x-data-grid-pro/themeAugmentation'; import type {} from '@mui/x-tree-view/themeAugmentation'; - -const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +import { CollapseIcon, ExpandIcon } from './components/icons/treeView'; declare module '@mui/material/styles/createPalette' { interface ColorRange { From 9c541d3d64ca12191b2f422794eedc7adbebf95b Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 15:18:25 +0100 Subject: [PATCH 3/3] bdghd --- .../src/components/icons/treeView.tsx | 11 ----------- packages/toolpad-studio/src/theme.ts | 15 ++++++++++++--- 2 files changed, 12 insertions(+), 14 deletions(-) delete mode 100644 packages/toolpad-studio/src/components/icons/treeView.tsx diff --git a/packages/toolpad-studio/src/components/icons/treeView.tsx b/packages/toolpad-studio/src/components/icons/treeView.tsx deleted file mode 100644 index 1e194a9e0cb..00000000000 --- a/packages/toolpad-studio/src/components/icons/treeView.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; - -export function CollapseIcon() { - return ; -} - -export function ExpandIcon() { - return ; -} diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts index ae975564a0e..2e4a9014487 100644 --- a/packages/toolpad-studio/src/theme.ts +++ b/packages/toolpad-studio/src/theme.ts @@ -4,7 +4,8 @@ import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; import type {} from '@mui/x-data-grid/themeAugmentation'; import type {} from '@mui/x-data-grid-pro/themeAugmentation'; import type {} from '@mui/x-tree-view/themeAugmentation'; -import { CollapseIcon, ExpandIcon } from './components/icons/treeView'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; declare module '@mui/material/styles/createPalette' { interface ColorRange { @@ -927,8 +928,16 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen MuiSimpleTreeView: { defaultProps: { slots: { - collapseIcon: CollapseIcon, - expandIcon: ExpandIcon, + collapseIcon: ExpandMoreIcon, + expandIcon: ChevronRightIcon, + }, + slotProps: { + collapseIcon: { + style: { fontSize: '0.9rem', opacity: 0.5 }, + }, + expandIcon: { + style: { fontSize: '0.9rem', opacity: 0.5 }, + }, }, }, },