Skip to content

Commit 36068a4

Browse files
brichetjtpio
brichet
and
jtpio
authored
Use the TooltippedIconButton in toolbars (#319)
* TooltippedButton style according to the send button * Use the TooltippedIconButton for all the default input toolbar buttons * Use the TooltippedIconButton for message toolbar buttons * Use the TooltippedIconButton in the code toolbar * Fix test * Apply suggestions from code review Co-authored-by: Jeremy Tuloup <[email protected]> --------- Co-authored-by: Jeremy Tuloup <[email protected]>
1 parent e319244 commit 36068a4

File tree

11 files changed

+187
-245
lines changed

11 files changed

+187
-245
lines changed

‎packages/jupyter-chat/src/components/code-blocks/code-toolbar.tsx‎

Lines changed: 29 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
*/
55

66
import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
7-
import { Box, IconButton, Tooltip } from '@mui/material';
7+
import { Box } from '@mui/material';
88
import React, { useEffect, useState } from 'react';
99

1010
import { CopyButton } from './copy-button';
11+
import { TooltippedIconButton } from '../mui-extras';
1112
import { IActiveCellManager } from '../../active-cell-manager';
1213
import { replaceCellIcon } from '../../icons';
1314
import { IChatModel } from '../../model';
@@ -114,24 +115,15 @@ function InsertAboveButton(props: ToolbarButtonProps) {
114115
: 'Insert above active cell (no active cell)';
115116

116117
return (
117-
<Tooltip title={tooltip} placement="top" arrow>
118-
<span>
119-
<IconButton
120-
className={props.className}
121-
onClick={() => props.activeCellManager?.insertAbove(props.content)}
122-
disabled={!props.activeCellAvailable}
123-
aria-label={tooltip}
124-
sx={{
125-
lineHeight: 0,
126-
'&.Mui-disabled': {
127-
opacity: 0.5
128-
}
129-
}}
130-
>
131-
<addAboveIcon.react height="16px" width="16px" />
132-
</IconButton>
133-
</span>
134-
</Tooltip>
118+
<TooltippedIconButton
119+
className={props.className}
120+
tooltip={tooltip}
121+
onClick={() => props.activeCellManager?.insertAbove(props.content)}
122+
disabled={!props.activeCellAvailable}
123+
inputToolbar={false}
124+
>
125+
<addAboveIcon.react height="16px" width="16px" />
126+
</TooltippedIconButton>
135127
);
136128
}
137129

@@ -141,24 +133,15 @@ function InsertBelowButton(props: ToolbarButtonProps) {
141133
: 'Insert below active cell (no active cell)';
142134

143135
return (
144-
<Tooltip title={tooltip} placement="top" arrow>
145-
<span>
146-
<IconButton
147-
className={props.className}
148-
disabled={!props.activeCellAvailable}
149-
onClick={() => props.activeCellManager?.insertBelow(props.content)}
150-
aria-label={tooltip}
151-
sx={{
152-
lineHeight: 0,
153-
'&.Mui-disabled': {
154-
opacity: 0.5
155-
}
156-
}}
157-
>
158-
<addBelowIcon.react height="16px" width="16px" />
159-
</IconButton>
160-
</span>
161-
</Tooltip>
136+
<TooltippedIconButton
137+
className={props.className}
138+
tooltip={tooltip}
139+
disabled={!props.activeCellAvailable}
140+
onClick={() => props.activeCellManager?.insertBelow(props.content)}
141+
inputToolbar={false}
142+
>
143+
<addBelowIcon.react height="16px" width="16px" />
144+
</TooltippedIconButton>
162145
);
163146
}
164147

@@ -187,23 +170,14 @@ function ReplaceButton(props: ToolbarButtonProps) {
187170
};
188171

189172
return (
190-
<Tooltip title={tooltip} placement="top" arrow>
191-
<span>
192-
<IconButton
193-
className={props.className}
194-
disabled={disabled}
195-
onClick={replace}
196-
aria-label={tooltip}
197-
sx={{
198-
lineHeight: 0,
199-
'&.Mui-disabled': {
200-
opacity: 0.5
201-
}
202-
}}
203-
>
204-
<replaceCellIcon.react height="16px" width="16px" />
205-
</IconButton>
206-
</span>
207-
</Tooltip>
173+
<TooltippedIconButton
174+
className={props.className}
175+
tooltip={tooltip}
176+
disabled={disabled}
177+
onClick={replace}
178+
inputToolbar={false}
179+
>
180+
<replaceCellIcon.react height="16px" width="16px" />
181+
</TooltippedIconButton>
208182
);
209183
}

‎packages/jupyter-chat/src/components/code-blocks/copy-button.tsx‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
* Distributed under the terms of the Modified BSD License.
44
*/
55

6+
import { copyIcon } from '@jupyterlab/ui-components';
67
import React, { useState, useCallback, useRef } from 'react';
78

8-
import { copyIcon } from '@jupyterlab/ui-components';
9-
import { IconButton, Tooltip } from '@mui/material';
9+
import { TooltippedIconButton } from '../mui-extras';
1010

1111
enum CopyStatus {
1212
None,
@@ -61,23 +61,16 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
6161
const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
6262

6363
return (
64-
<Tooltip title={tooltip} placement="top" arrow>
65-
<span>
66-
<IconButton
67-
disabled={isCopyDisabled}
68-
className={props.className}
69-
onClick={copy}
70-
aria-label="Copy to clipboard"
71-
sx={{
72-
lineHeight: 0,
73-
'&.Mui-disabled': {
74-
opacity: 0.5
75-
}
76-
}}
77-
>
78-
<copyIcon.react height="16px" width="16px" />
79-
</IconButton>
80-
</span>
81-
</Tooltip>
64+
<TooltippedIconButton
65+
disabled={isCopyDisabled}
66+
className={props.className}
67+
tooltip={tooltip}
68+
placement="top"
69+
onClick={copy}
70+
aria-label="Copy to clipboard"
71+
inputToolbar={false}
72+
>
73+
<copyIcon.react height="16px" width="16px" />
74+
</TooltippedIconButton>
8275
);
8376
}

‎packages/jupyter-chat/src/components/input/buttons/attach-button.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
88
import React from 'react';
99

1010
import { InputToolbarRegistry } from '../toolbar-registry';
11-
import { TooltippedButton } from '../../mui-extras/tooltipped-button';
11+
import { TooltippedIconButton } from '../../mui-extras';
1212

1313
const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
1414

@@ -47,23 +47,15 @@ export function AttachButton(
4747
};
4848

4949
return (
50-
<TooltippedButton
50+
<TooltippedIconButton
5151
onClick={onclick}
5252
tooltip={tooltip}
53-
buttonProps={{
54-
size: 'small',
55-
variant: 'text',
53+
iconButtonProps={{
5654
title: tooltip,
5755
className: ATTACH_BUTTON_CLASS
5856
}}
59-
sx={{
60-
width: '24px',
61-
height: '24px',
62-
minWidth: '24px',
63-
color: 'gray'
64-
}}
6557
>
66-
<AttachFileIcon sx={{ fontSize: '16px ' }} />
67-
</TooltippedButton>
58+
<AttachFileIcon />
59+
</TooltippedIconButton>
6860
);
6961
}

‎packages/jupyter-chat/src/components/input/buttons/cancel-button.tsx‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
*/
55

66
import CloseIcon from '@mui/icons-material/Close';
7-
import { IconButton, Tooltip } from '@mui/material';
87
import React from 'react';
98

109
import { InputToolbarRegistry } from '../toolbar-registry';
10+
import { TooltippedIconButton } from '../../mui-extras';
1111

1212
const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
1313

@@ -22,22 +22,15 @@ export function CancelButton(
2222
}
2323
const tooltip = 'Cancel editing';
2424
return (
25-
<Tooltip title={tooltip} placement="top" arrow>
26-
<span>
27-
<IconButton
28-
onClick={props.model.cancel}
29-
className={CANCEL_BUTTON_CLASS}
30-
aria-label={tooltip}
31-
sx={{
32-
width: '24px',
33-
height: '24px',
34-
padding: 0,
35-
lineHeight: 0
36-
}}
37-
>
38-
<CloseIcon sx={{ fontSize: '16px' }} />
39-
</IconButton>
40-
</span>
41-
</Tooltip>
25+
<TooltippedIconButton
26+
onClick={props.model.cancel}
27+
tooltip={tooltip}
28+
iconButtonProps={{
29+
title: tooltip,
30+
className: CANCEL_BUTTON_CLASS
31+
}}
32+
>
33+
<CloseIcon />
34+
</TooltippedIconButton>
4235
);
4336
}

‎packages/jupyter-chat/src/components/input/buttons/save-edit-button.tsx‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
*/
55

66
import CheckIcon from '@mui/icons-material/Check';
7-
import { IconButton, Tooltip } from '@mui/material';
87
import React, { useEffect, useState } from 'react';
98

109
import { InputToolbarRegistry } from '../toolbar-registry';
10+
import { TooltippedIconButton } from '../../mui-extras';
1111

1212
const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
1313

@@ -50,26 +50,17 @@ export function SaveEditButton(
5050
}
5151

5252
return (
53-
<Tooltip title={tooltip} placement="top" arrow>
54-
<span>
55-
<IconButton
56-
onClick={save}
57-
disabled={disabled}
58-
className={SAVE_EDIT_BUTTON_CLASS}
59-
aria-label={tooltip}
60-
sx={{
61-
width: '24px',
62-
height: '24px',
63-
padding: 0,
64-
lineHeight: 0,
65-
'&.Mui-disabled': {
66-
opacity: 0.5
67-
}
68-
}}
69-
>
70-
<CheckIcon sx={{ fontSize: '16px' }} />
71-
</IconButton>
72-
</span>
73-
</Tooltip>
53+
<TooltippedIconButton
54+
onClick={save}
55+
tooltip={tooltip}
56+
disabled={disabled}
57+
iconButtonProps={{
58+
title: tooltip,
59+
className: SAVE_EDIT_BUTTON_CLASS
60+
}}
61+
aria-label={tooltip}
62+
>
63+
<CheckIcon />
64+
</TooltippedIconButton>
7465
);
7566
}

‎packages/jupyter-chat/src/components/input/buttons/send-button.tsx‎

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
*/
55

66
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
7-
import { Button, Tooltip } from '@mui/material';
87
import React, { useEffect, useState } from 'react';
98

109
import { InputToolbarRegistry } from '../toolbar-registry';
10+
import { TooltippedIconButton } from '../../mui-extras';
1111
import { IInputModel, InputModel } from '../../../input-model';
1212

1313
const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -69,38 +69,17 @@ export function SendButton(
6969
}
7070

7171
return (
72-
<Tooltip title={tooltip} placement="top" arrow>
73-
<span>
74-
<Button
75-
onClick={send}
76-
disabled={disabled}
77-
size="small"
78-
variant="contained"
79-
className={SEND_BUTTON_CLASS}
80-
aria-label={tooltip}
81-
sx={{
82-
backgroundColor: 'var(--jp-brand-color1)',
83-
color: 'white',
84-
minWidth: '24px',
85-
width: '24px',
86-
height: '24px',
87-
borderRadius: '4px',
88-
boxShadow: 'none',
89-
lineHeight: 0,
90-
'&:hover': {
91-
backgroundColor: 'var(--jp-brand-color0)',
92-
boxShadow: 'none'
93-
},
94-
'&.Mui-disabled': {
95-
backgroundColor: 'var(--jp-border-color2)',
96-
color: 'var(--jp-ui-font-color3)',
97-
opacity: 0.5
98-
}
99-
}}
100-
>
101-
<ArrowUpwardIcon sx={{ fontSize: '16px' }} />
102-
</Button>
103-
</span>
104-
</Tooltip>
72+
<TooltippedIconButton
73+
onClick={send}
74+
tooltip={tooltip}
75+
disabled={disabled}
76+
iconButtonProps={{
77+
title: tooltip,
78+
className: SEND_BUTTON_CLASS
79+
}}
80+
aria-label={tooltip}
81+
>
82+
<ArrowUpwardIcon />
83+
</TooltippedIconButton>
10584
);
10685
}

0 commit comments

Comments
 (0)