Skip to content

Commit 5f2fbbd

Browse files
author
Jose Gaston
committed
refactor(preview-sidebar): update sidebar toggle button icon
1 parent 121de79 commit 5f2fbbd

File tree

5 files changed

+130
-14
lines changed

5 files changed

+130
-14
lines changed

‎src/components/sidebar-toggle-button/SidebarToggleButton.js‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import * as React from 'react';
33
import classNames from 'classnames';
44
import { injectIntl } from 'react-intl';
55
import type { IntlShape } from 'react-intl';
6-
import { Tooltip as BPTooltip } from '@box/blueprint-web';
6+
import { IconButton, Tooltip as BPTooltip } from '@box/blueprint-web';
77
import IconHide from '../../icons/general/IconHide';
88
import IconShow from '../../icons/general/IconShow';
9+
import IconRightSidebarChevronOpen from '../../icons/general/IconRightSidebarChevronOpen';
10+
import IconRightSidebarChevronClose from '../../icons/general/IconRightSidebarChevronClose';
911
import PlainButton from '../plain-button';
1012
import Tooltip from '../tooltip';
1113
import { useFeatureConfig } from '../../elements/common/feature-checking';
@@ -38,34 +40,46 @@ const SidebarToggleButton = ({
3840
const intlText = intl.formatMessage(intlMessage);
3941
const classes = classNames(className, 'bdl-SidebarToggleButton', {
4042
'bdl-is-collapsed': isCollapsed,
41-
'bdl-SidebarToggleButton--modernized': isPreviewModernizationEnabled,
4243
});
43-
const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
44-
const renderButton = () => {
45-
if (direction === DIRECTION_LEFT) {
44+
const isDirectionLeft = direction === DIRECTION_LEFT;
45+
const tooltipPosition = isDirectionLeft ? 'middle-right' : 'middle-left';
46+
const renderIcon = () => {
47+
if (isDirectionLeft) {
4648
return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
4749
}
4850
return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
4951
};
5052

5153
if (isPreviewModernizationEnabled) {
52-
const tooltipPositionModernized = direction === DIRECTION_LEFT ? DIRECTION_RIGHT : DIRECTION_LEFT;
53-
54+
const tooltipPositionModernized = isDirectionLeft ? DIRECTION_RIGHT : DIRECTION_LEFT;
5455
return (
5556
<BPTooltip content={intlText} side={tooltipPositionModernized}>
56-
{/* Workaround to attach BP tooltip to legacy button, remove span when buttons are migrated to BP */}
57-
<span>
58-
<PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
59-
{renderButton()}
60-
</PlainButton>
61-
</span>
57+
{isDirectionLeft ? (
58+
<IconButton
59+
aria-label={intlText}
60+
icon={isOpen ? IconRightSidebarChevronOpen : IconRightSidebarChevronClose}
61+
onClick={onClick}
62+
size="large"
63+
variant="high-contrast"
64+
{...rest}
65+
/>
66+
) : (
67+
<IconButton
68+
aria-label={intlText}
69+
icon={isOpen ? IconRightSidebarChevronClose : IconRightSidebarChevronOpen}
70+
onClick={onClick}
71+
size="large"
72+
variant="high-contrast"
73+
{...rest}
74+
/>
75+
)}
6276
</BPTooltip>
6377
);
6478
}
6579
return (
6680
<Tooltip position={tooltipPosition} text={intlText}>
6781
<PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
68-
{renderButton()}
82+
{renderIcon()}
6983
</PlainButton>
7084
</Tooltip>
7185
);

‎src/icons/general/IconRightSidebarChevronClose.js.flow‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// @flow
2+
import * as React from 'react';
3+
4+
import AccessibleSVG from '../accessible-svg';
5+
6+
import { Icon } from '../iconTypes';
7+
8+
// Copied from Figma - will replace with blueprint icon once available
9+
const IconRightSidebarChevronClose = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
10+
<AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
11+
<path
12+
d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
13+
fill={color}
14+
fill-opacity="0.6"
15+
/>
16+
<path
17+
fill-rule="evenodd"
18+
clip-rule="evenodd"
19+
d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
20+
fill={color}
21+
fill-opacity="0.6"
22+
/>
23+
</AccessibleSVG>
24+
);
25+
26+
export default IconRightSidebarChevronClose;

‎src/icons/general/IconRightSidebarChevronClose.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
3+
import AccessibleSVG from '../accessible-svg';
4+
5+
import { Icon } from '../iconTypes';
6+
7+
// Copied from Figma - will replace with blueprint icon once available
8+
const IconRightSidebarChevronClose = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
9+
<AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
10+
<path
11+
d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
12+
fill={color}
13+
fill-opacity="0.6"
14+
/>
15+
<path
16+
fill-rule="evenodd"
17+
clip-rule="evenodd"
18+
d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
19+
fill={color}
20+
fill-opacity="0.6"
21+
/>
22+
</AccessibleSVG>
23+
);
24+
25+
export default IconRightSidebarChevronClose;

‎src/icons/general/IconRightSidebarChevronOpen.js.flow‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// @flow
2+
import * as React from 'react';
3+
4+
import AccessibleSVG from '../accessible-svg';
5+
6+
import { Icon } from '../iconTypes';
7+
8+
// Copied from Figma - will replace with blueprint icon once available
9+
const IconRightSidebarChevronOpen = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
10+
<AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
11+
<path
12+
d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
13+
fill={color}
14+
fill-opacity="0.6"
15+
/>
16+
<path
17+
fill-rule="evenodd"
18+
clip-rule="evenodd"
19+
d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
20+
fill={color}
21+
fill-opacity="0.6"
22+
/>
23+
</AccessibleSVG>
24+
);
25+
26+
export default IconRightSidebarChevronOpen;

‎src/icons/general/IconRightSidebarChevronOpen.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
3+
import AccessibleSVG from '../accessible-svg';
4+
5+
import { Icon } from '../iconTypes';
6+
7+
// Copied from Figma - will replace with blueprint icon once available
8+
const IconRightSidebarChevronOpen = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
9+
<AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
10+
<path
11+
d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
12+
fill={color}
13+
fill-opacity="0.6"
14+
/>
15+
<path
16+
fill-rule="evenodd"
17+
clip-rule="evenodd"
18+
d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
19+
fill={color}
20+
fill-opacity="0.6"
21+
/>
22+
</AccessibleSVG>
23+
);
24+
25+
export default IconRightSidebarChevronOpen;

0 commit comments

Comments
 (0)