Skip to content

Commit 3756514

Browse files
kduncanhsukduncanhsu
authored
refactor(metadata-instance-editor): migrate edit button to BP (#4416)
* refactor(metadata-instance-editor): migrate edit button to BP * refactor(metadata-instance-editor): migrate edit button to BP * refactor(metadata-instance-editor): remove unneccesary TooltipProvider wrapper * refactor(metadata-instance-editor): update snapshots
1 parent 9f174dc commit 3756514

File tree

4 files changed

+50
-65
lines changed

4 files changed

+50
-65
lines changed

‎flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
1515
declare export var RightSidebarChevronOpen: React$ComponentType<any>;
1616
declare export var MagicWand: React$ComponentType<any>;
1717
declare export var DocGen: React$ComponentType<any>;
18+
declare export var Pencil: React$ComponentType<any>;
1819
}
1920

2021
declare module '@box/blueprint-web-assets/icons/MediumFilled' {

‎src/features/metadata-instance-editor/Instance.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import isEqual from 'lodash/isEqual';
66
import cloneDeep from 'lodash/cloneDeep';
77
import noop from 'lodash/noop';
88

9+
import { IconButton, Tooltip } from '@box/blueprint-web';
10+
import { Pencil } from '@box/blueprint-web-assets/icons/Medium';
11+
912
import type { AgentType } from '@box/box-ai-agent-selector';
1013
import Collapsible from '../../components/collapsible/Collapsible';
1114
import Form from '../../components/form-elements/form/Form';
1215
import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
13-
import PlainButton from '../../components/plain-button/PlainButton';
14-
import Tooltip from '../../components/tooltip';
1516
import IconMetadataColored from '../../icons/general/IconMetadataColored';
1617
import IconAlertCircle from '../../icons/general/IconAlertCircle';
17-
import IconEdit from '../../icons/general/IconEdit';
1818
import { bdlWatermelonRed } from '../../styles/variables';
1919
import { scrollIntoView } from '../../utils/dom';
2020

@@ -621,17 +621,16 @@ class Instance extends React.PureComponent<Props, State> {
621621
if (canEdit && !isDirty && !isBusy) {
622622
const metadataLabelEditText = intl.formatMessage(messages.metadataEditTooltip);
623623
return (
624-
<Tooltip position="top-left" text={metadataLabelEditText}>
625-
<PlainButton
624+
<Tooltip content={metadataLabelEditText}>
625+
<IconButton
626626
aria-label={metadataLabelEditText}
627627
aria-pressed={isEditing}
628628
className={editClassName}
629629
data-resin-target="metadata-instanceedit"
630+
icon={Pencil}
630631
onClick={this.toggleIsEditing}
631-
type="button"
632-
>
633-
<IconEdit />
634-
</PlainButton>
632+
size="x-small"
633+
/>
635634
</Tooltip>
636635
);
637636
}

‎src/features/metadata-instance-editor/Instance.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,14 @@
2020
}
2121
}
2222

23-
.btn-plain.metadata-instance-editor-instance-edit {
23+
.metadata-instance-editor-instance-edit {
2424
position: absolute;
2525
top: 8px;
2626
right: 25px;
2727
z-index: 10;
2828
display: flex;
2929
align-items: center;
3030
justify-content: center;
31-
width: 24px;
32-
height: 24px;
33-
border-radius: $bdl-border-radius-size;
34-
35-
&:hover svg path {
36-
fill: $bdl-gray;
37-
}
3831

3932
&.metadata-instance-editor-instance-is-editing {
4033
background-color: $bdl-gray-10;

‎src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap‎

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,20 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
1212
className=""
1313
hasStickyHeader={true}
1414
headerActionItems={
15-
<Tooltip
16-
constrainToScrollParent={false}
17-
constrainToWindow={true}
18-
isDisabled={false}
19-
position="top-left"
20-
theme="default"
21-
>
22-
<PlainButton
15+
<Tooltip>
16+
<IconButton
2317
aria-pressed={false}
2418
className="metadata-instance-editor-instance-edit"
2519
data-resin-target="metadata-instanceedit"
20+
icon={
21+
{
22+
"$$typeof": Symbol(react.forward_ref),
23+
"render": [Function],
24+
}
25+
}
2626
onClick={[Function]}
27-
type="button"
28-
>
29-
<IconEdit />
30-
</PlainButton>
27+
size="x-small"
28+
/>
3129
</Tooltip>
3230
}
3331
isBordered={true}
@@ -748,22 +746,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
748746
className=""
749747
hasStickyHeader={true}
750748
headerActionItems={
751-
<Tooltip
752-
constrainToScrollParent={false}
753-
constrainToWindow={true}
754-
isDisabled={false}
755-
position="top-left"
756-
theme="default"
757-
>
758-
<PlainButton
749+
<Tooltip>
750+
<IconButton
759751
aria-pressed={true}
760752
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
761753
data-resin-target="metadata-instanceedit"
754+
icon={
755+
{
756+
"$$typeof": Symbol(react.forward_ref),
757+
"render": [Function],
758+
}
759+
}
762760
onClick={[Function]}
763-
type="button"
764-
>
765-
<IconEdit />
766-
</PlainButton>
761+
size="x-small"
762+
/>
767763
</Tooltip>
768764
}
769765
isBordered={true}
@@ -944,22 +940,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
944940
className=""
945941
hasStickyHeader={true}
946942
headerActionItems={
947-
<Tooltip
948-
constrainToScrollParent={false}
949-
constrainToWindow={true}
950-
isDisabled={false}
951-
position="top-left"
952-
theme="default"
953-
>
954-
<PlainButton
943+
<Tooltip>
944+
<IconButton
955945
aria-pressed={true}
956946
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
957947
data-resin-target="metadata-instanceedit"
948+
icon={
949+
{
950+
"$$typeof": Symbol(react.forward_ref),
951+
"render": [Function],
952+
}
953+
}
958954
onClick={[Function]}
959-
type="button"
960-
>
961-
<IconEdit />
962-
</PlainButton>
955+
size="x-small"
956+
/>
963957
</Tooltip>
964958
}
965959
isBordered={true}
@@ -1049,22 +1043,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
10491043
className=""
10501044
hasStickyHeader={true}
10511045
headerActionItems={
1052-
<Tooltip
1053-
constrainToScrollParent={false}
1054-
constrainToWindow={true}
1055-
isDisabled={false}
1056-
position="top-left"
1057-
theme="default"
1058-
>
1059-
<PlainButton
1046+
<Tooltip>
1047+
<IconButton
10601048
aria-pressed={true}
10611049
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
10621050
data-resin-target="metadata-instanceedit"
1051+
icon={
1052+
{
1053+
"$$typeof": Symbol(react.forward_ref),
1054+
"render": [Function],
1055+
}
1056+
}
10631057
onClick={[Function]}
1064-
type="button"
1065-
>
1066-
<IconEdit />
1067-
</PlainButton>
1058+
size="x-small"
1059+
/>
10681060
</Tooltip>
10691061
}
10701062
isBordered={true}

0 commit comments

Comments
 (0)