Skip to content

Add a new simple IconAndTextButton component to use in apps instead of IconButton with children text #1011

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sBouzols wants to merge 2 commits into
base: main
Choose a base branch
from
+193 −145
Open

Add a new simple IconAndTextButton component to use in apps instead of IconButton with children text #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94a7a22
feat(): Add `IconAndTextButton` to use in apps instead of IconButton …
sBouzols Jan 29, 2026
6695392
Merge branch 'main' into feat_add_IconAndTextButton_component
sBouzols Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
299 changes: 154 additions & 145 deletions demo/src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ import {
useSnackMessage,
LeftPanelOpenIcon,
EditNoteIcon,
IconAndTextButton,
} from '../../src';

const messages = {
Expand Down Expand Up @@ -637,173 +638,181 @@ function AppContent({ language, onLanguageClick }) {
<EditNoteIcon fontSize="large" empty />
<hr />

<PermanentSnackButton />
<SnackErrorButton />
<SnackWarningButton />
<SnackInfoButton />
<SnackSuccessButton />
<Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', width: '20%' }}>
<PermanentSnackButton />
<SnackErrorButton />
<SnackWarningButton />
<SnackInfoButton />
<SnackSuccessButton />
</Box>

<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={() => setOpenMultiChoiceDialog(true)}
>
Checkbox list
</Button>
<MultipleSelectionDialog
items={checkBoxListOption}
selectedItems={[]}
open={openMultiChoiceDialog}
getItemLabel={(o) => o.label}
getItemLabelSecondary={(o) => o.labelSecondary}
getItemId={(o) => o.id}
handleClose={() => setOpenMultiChoiceDialog(false)}
handleValidate={() => setOpenMultiChoiceDialog(false)}
titleId="Checkbox list"
divider
secondaryAction={secondaryAction}
addSelectAllCheckbox
onItemClick={(item) => console.log('clicked', item)}
isItemClickable={(item) => item.id === 'ney' || item.id === 'john'}
/>

<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={() => setOpenDraggableMultiChoiceDialog(true)}
>
Draggable checkbox list
</Button>
<MultipleSelectionDialog
items={checkBoxListOption}
selectedItems={[]}
open={openDraggableMultiChoiceDialog}
getItemLabel={(o) => o.label}
getItemLabelSecondary={(o) => o.labelSecondary}
getItemId={(o) => o.id}
handleClose={() => setOpenDraggableMultiChoiceDialog(false)}
handleValidate={() => setOpenDraggableMultiChoiceDialog(false)}
titleId="Draggable checkbox list"
divider
secondaryAction={secondaryAction}
isDndActive
onDragEnd={({ source, destination }) => {
if (destination !== null && source.index !== destination.index) {
const res = [...checkBoxListOption];
const [item] = res.splice(source.index, 1);
res.splice(destination ? destination.index : checkBoxListOption.length, 0, item);
setCheckBoxListOption(res);
}
}}
addSelectAllCheckbox
onItemClick={(item) => console.log('clicked', item)}
isItemClickable={(item) => item.id.indexOf('i') >= 0}
sx={{
items: (item) => ({
label: {
color: item.id.indexOf('i') >= 0 ? 'blue' : 'red',
},
}),
}}
/>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}}
>
<TreeViewFinderConfig
dynamicData={dynamicData}
dataFormat={dataFormat}
multiSelect={multiSelect}
onlyLeaves={onlyLeaves}
sortedAlphabetically={sortedAlphabetically}
onDynamicDataChange={(event) => setDynamicData(event.target.value === 'dynamic')}
onDataFormatChange={(event) => setDataFormat(event.target.value)}
onSelectionTypeChange={(event) => setMultiSelect(event.target.value === 'multiselect')}
onOnlyLeavesChange={(event) => setOnlyLeaves(event.target.checked)}
onSortedAlphabeticallyChange={(event) => setSortedAlphabetically(event.target.checked)}
/>
<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={() => setOpenTreeViewFinderDialog(true)}
onClick={() => setOpenMultiChoiceDialog(true)}
>
Open TreeViewFinder ...
Checkbox list
</Button>
<MultipleSelectionDialog
items={checkBoxListOption}
selectedItems={[]}
open={openMultiChoiceDialog}
getItemLabel={(o) => o.label}
getItemLabelSecondary={(o) => o.labelSecondary}
getItemId={(o) => o.id}
handleClose={() => setOpenMultiChoiceDialog(false)}
handleValidate={() => setOpenMultiChoiceDialog(false)}
titleId="Checkbox list"
divider
secondaryAction={secondaryAction}
addSelectAllCheckbox
onItemClick={(item) => console.log('clicked', item)}
isItemClickable={(item) => item.id === 'ney' || item.id === 'john'}
/>

<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={handleToggleDisableSearch}
onClick={() => setOpenDraggableMultiChoiceDialog(true)}
>
Toggle search ...
Draggable checkbox list
</Button>
<TreeViewFinder
open={openTreeViewFinderDialog}
onClose={(nodes) => {
setOpenTreeViewFinderDialog(false);
console.log('Elements chosen : ', nodes);
<MultipleSelectionDialog
items={checkBoxListOption}
selectedItems={[]}
open={openDraggableMultiChoiceDialog}
getItemLabel={(o) => o.label}
getItemLabelSecondary={(o) => o.labelSecondary}
getItemId={(o) => o.id}
handleClose={() => setOpenDraggableMultiChoiceDialog(false)}
handleValidate={() => setOpenDraggableMultiChoiceDialog(false)}
titleId="Draggable checkbox list"
divider
secondaryAction={secondaryAction}
isDndActive
onDragEnd={({ source, destination }) => {
if (destination !== null && source.index !== destination.index) {
const res = [...checkBoxListOption];
const [item] = res.splice(source.index, 1);
res.splice(destination ? destination.index : checkBoxListOption.length, 0, item);
setCheckBoxListOption(res);
}
}}
addSelectAllCheckbox
onItemClick={(item) => console.log('clicked', item)}
isItemClickable={(item) => item.id.indexOf('i') >= 0}
sx={{
items: (item) => ({
label: {
color: item.id.indexOf('i') >= 0 ? 'blue' : 'red',
},
}),
}}
data={dataFormat === 'Tree' ? nodesTree : nodesList}
multiSelect={multiSelect}
onTreeBrowse={
dynamicData
? dataFormat === 'Tree'
? updateInfiniteTestDataTreeCallback
: updateInfiniteTestDataListCallback
: undefined
}
onlyLeaves={onlyLeaves}
sortMethod={sortedAlphabetically ? sortAlphabetically : undefined}
// Customisation props to pass the counter in the title
title={`Number of nodes : ${countNodes(dataFormat === 'Tree' ? nodesTree : nodesList)}`}
/>
<Button
variant="contained"
<div
style={{
float: 'left',
margin: '5px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}}
onClick={() => setOpenTreeViewFinderDialogCustomDialog(true)}
>
Open Custom TreeViewFinder…
</Button>
<CustomTreeViewFinder
open={openTreeViewFinderDialogCustomDialog}
onClose={(nodes) => {
setOpenTreeViewFinderDialogCustomDialog(false);
console.log('Elements chosen : ', nodes);
}}
data={dataFormat === 'Tree' ? nodesTree : nodesList}
multiSelect={multiSelect}
onTreeBrowse={
dynamicData
? dataFormat === 'Tree'
? updateInfiniteTestDataTreeCallback
: updateInfiniteTestDataListCallback
: undefined
}
onlyLeaves={onlyLeaves}
// Customisation props
title={`Custom Title TreeViewFinder, Number of nodes : ${countNodes(
dataFormat === 'Tree' ? nodesTree : nodesList
)}`}
validationButtonText="Move To this location"
/>
</div>
<TreeViewFinderConfig
dynamicData={dynamicData}
dataFormat={dataFormat}
multiSelect={multiSelect}
onlyLeaves={onlyLeaves}
sortedAlphabetically={sortedAlphabetically}
onDynamicDataChange={(event) => setDynamicData(event.target.value === 'dynamic')}
onDataFormatChange={(event) => setDataFormat(event.target.value)}
onSelectionTypeChange={(event) => setMultiSelect(event.target.value === 'multiselect')}
onOnlyLeavesChange={(event) => setOnlyLeaves(event.target.checked)}
onSortedAlphabeticallyChange={(event) => setSortedAlphabetically(event.target.checked)}
/>
<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={() => setOpenTreeViewFinderDialog(true)}
>
Open TreeViewFinder ...
</Button>
<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={handleToggleDisableSearch}
>
Toggle search ...
</Button>
<TreeViewFinder
open={openTreeViewFinderDialog}
onClose={(nodes) => {
setOpenTreeViewFinderDialog(false);
console.log('Elements chosen : ', nodes);
}}
data={dataFormat === 'Tree' ? nodesTree : nodesList}
multiSelect={multiSelect}
onTreeBrowse={
dynamicData
? dataFormat === 'Tree'
? updateInfiniteTestDataTreeCallback
: updateInfiniteTestDataListCallback
: undefined
}
onlyLeaves={onlyLeaves}
sortMethod={sortedAlphabetically ? sortAlphabetically : undefined}
// Customisation props to pass the counter in the title
title={`Number of nodes : ${countNodes(dataFormat === 'Tree' ? nodesTree : nodesList)}`}
/>
<Button
variant="contained"
style={{
float: 'left',
margin: '5px',
}}
onClick={() => setOpenTreeViewFinderDialogCustomDialog(true)}
>
Open Custom TreeViewFinder…
</Button>
<CustomTreeViewFinder
open={openTreeViewFinderDialogCustomDialog}
onClose={(nodes) => {
setOpenTreeViewFinderDialogCustomDialog(false);
console.log('Elements chosen : ', nodes);
}}
data={dataFormat === 'Tree' ? nodesTree : nodesList}
multiSelect={multiSelect}
onTreeBrowse={
dynamicData
? dataFormat === 'Tree'
? updateInfiniteTestDataTreeCallback
: updateInfiniteTestDataListCallback
: undefined
}
onlyLeaves={onlyLeaves}
// Customisation props
title={`Custom Title TreeViewFinder, Number of nodes : ${countNodes(
dataFormat === 'Tree' ? nodesTree : nodesList
)}`}
validationButtonText="Move To this location"
/>
</div>
</Box>
<IconAndTextButton startIcon={<CommentIcon />}>This my text</IconAndTextButton>
<IconAndTextButton variant="outlined">
<Typography>not defined icon button</Typography>
</IconAndTextButton>
<div
style={{
margin: '10px 0px 0px 0px',
Expand Down
31 changes: 31 additions & 0 deletions src/components/iconAndTextButton/IconAndTextButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* Copyright © 2026, RTE (http://www.rte-france.com)
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import { Button, ButtonProps } from '@mui/material';
import NotListedLocationIcon from '@mui/icons-material/NotListedLocation';
import { mergeSx } from '../../utils';

const styles = {
button: {
textTransform: 'none',
},
} as const;

export function IconAndTextButton(props: Readonly<ButtonProps>) {
const { children, sx, startIcon, ...others } = props;
return (
<Button
component="label"
variant="contained"
// to point out to the client to use an icon here defining startIcon prop
startIcon={startIcon ?? <NotListedLocationIcon />}
sx={mergeSx(styles.button, sx)}
{...others}
>
{children}
</Button>
);
}
7 changes: 7 additions & 0 deletions src/components/iconAndTextButton/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright © 2026, RTE (http://www.rte-france.com)
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
export * from './IconAndTextButton';
1 change: 1 addition & 0 deletions src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@ export * from './parameters';
export * from './menus';
export * from './muiTable';
export * from './resizablePanels';
export * from './iconAndTextButton';
Loading