From 9c2c293e3ad007b19257725edeec7a39e6a8857d Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Wed, 12 Jun 2019 13:17:08 -0700 Subject: [PATCH 1/6] feat(sidebar): Toggle button --- .../sidebar-toggle-button/README.md | 12 + .../SidebarToggleButton.js | 38 +++ .../SidebarToggleButton.scss | 33 ++ src/components/sidebar-toggle-button/index.js | 2 + src/elements/content-sidebar/SidebarNav.js | 103 ++++--- src/elements/content-sidebar/SidebarNav.scss | 12 +- .../__snapshots__/SidebarNav-test.js.snap | 285 ++++++++++++------ 7 files changed, 348 insertions(+), 137 deletions(-) create mode 100644 src/components/sidebar-toggle-button/README.md create mode 100644 src/components/sidebar-toggle-button/SidebarToggleButton.js create mode 100644 src/components/sidebar-toggle-button/SidebarToggleButton.scss create mode 100644 src/components/sidebar-toggle-button/index.js diff --git a/src/components/sidebar-toggle-button/README.md b/src/components/sidebar-toggle-button/README.md new file mode 100644 index 0000000000..e3c9b28f20 --- /dev/null +++ b/src/components/sidebar-toggle-button/README.md @@ -0,0 +1,12 @@ +### Examples +**Open** +```js +const isOpen = true; + +``` +**Closed** +```js +const isOpen = true; + +``` + diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js new file mode 100644 index 0000000000..8a74a7b345 --- /dev/null +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js @@ -0,0 +1,38 @@ +// @flow +import * as React from 'react'; +import classNames from 'classnames'; +import { injectIntl } from 'react-intl'; + +import IconHide from '../../icons/general/IconHide'; +import IconShow from '../../icons/general/IconShow'; +import PlainButton from '../plain-button'; +import Tooltip from '../tooltip'; + +import messages from '../../elements/common/messages'; + +import './SidebarToggleButton.scss'; + +type Props = { + isOpen: Boolean, + onClick?: Function, +} & InjectIntlProvidedProps; + +const SidebarToggleButton = ({ intl, isOpen, onClick, ...rest }: Props) => { + const isCollapsed = !isOpen ? 'collapsed' : ''; + const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow; + const intlText = intl.formatMessage(intlMessage); + const classes = classNames({ + 'bdl-SidebarToggleButton': true, + 'bdl-is-collapsed': isCollapsed, + }); + + return ( + + + {isOpen ? : } + + + ); +}; + +export default injectIntl(SidebarToggleButton); diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.scss b/src/components/sidebar-toggle-button/SidebarToggleButton.scss new file mode 100644 index 0000000000..ce788854ef --- /dev/null +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.scss @@ -0,0 +1,33 @@ +@import '../../styles/variables'; + +.bdl-SidebarToggleButton, +.bdl-SidebarToggleButton:hover, +.bdl-SidebarToggleButton:active, +.bdl-SidebarToggleButton:focus { + border-radius: $bdl-border-radius-size; + height: 24px; + margin: 0 3px; + padding: 4px; + + path { + fill: $bdl-gray-50; + } + + &:not(.is-disabled):hover { + background-color: $bdl-gray-05; + } + + &:not(.is-disabled):focus { + border-color: #96a0a6; + box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + } + + &.bdl-is-collapsed, + &.bdl-is-collapsed:hover { + background-color: $bdl-box-blue; + + path { + fill: $white; + } + } +} diff --git a/src/components/sidebar-toggle-button/index.js b/src/components/sidebar-toggle-button/index.js new file mode 100644 index 0000000000..ebb60dbd59 --- /dev/null +++ b/src/components/sidebar-toggle-button/index.js @@ -0,0 +1,2 @@ +// @flow +export { default } from './SidebarToggleButton'; diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js index 6cb65c0591..a9faa71c67 100644 --- a/src/elements/content-sidebar/SidebarNav.js +++ b/src/elements/content-sidebar/SidebarNav.js @@ -10,6 +10,7 @@ import IconMagicWand from '../../icons/general/IconMagicWand'; import IconMetadataThick from '../../icons/general/IconMetadataThick'; import IconDocInfo from '../../icons/general/IconDocInfo'; import IconChatRound from '../../icons/general/IconChatRound'; +import SidebarToggleButton from '../../components/sidebar-toggle-button'; import messages from '../common/messages'; import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets'; import SidebarNavButton from './SidebarNavButton'; @@ -46,52 +47,64 @@ const SidebarNav = ({ isOpen, onNavigate, }: Props) => ( -
- {hasActivity && ( - +
+ {hasActivity && ( + } + > + + + )} + {hasDetails && ( + } + > + + + )} + {hasSkills && ( + } + > + + + )} + {hasMetadata && ( + } + > + + + )} + {hasAdditionalTabs && } +
+
+ } - > - - - )} - {hasDetails && ( - } - > - - - )} - {hasSkills && ( - } - > - - - )} - {hasMetadata && ( - } - > - - - )} - {hasAdditionalTabs && } + onClick={event => { + if (onNavigate) { + onNavigate(event, { isToggle: true }); + } + }} + /> +
); diff --git a/src/elements/content-sidebar/SidebarNav.scss b/src/elements/content-sidebar/SidebarNav.scss index 649e7d238c..c10f9da89c 100644 --- a/src/elements/content-sidebar/SidebarNav.scss +++ b/src/elements/content-sidebar/SidebarNav.scss @@ -1,7 +1,17 @@ @import '../common/variables'; .bcs { - nav { + .bcs-SidebarNav { border-left: 1px solid $off-white; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .bcs-SidebarNav-toggle { + align-items: center; + display: flex; + height: 60px; + justify-content: center; } } diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap index be5f07593c..55aade6167 100644 --- a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap +++ b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap @@ -13,119 +13,222 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l >
- -
- - -
+ +
-
- - -
+
+
+ +
-
- - -
+
+
+ +
-
- - -
+
+
+ +
-
- - -
+
+
+ +
-
- - -
+
+
+ + - - - - - - - -
- - -
- + + + + + +
+ + +
+ +
+
+ + + + } + classPrefix="tooltip" + constraints={ + Array [ + Object { + "attachment": "together", + "to": "window", + }, + ] + } + enabled={false} + renderElementTag="div" + renderElementTo={null} + targetAttachment="middle left" + > + + + + + + + +
`; From 1a303329a39271d10da229c13949dc8c6008c1d2 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Thu, 13 Jun 2019 10:40:34 -0700 Subject: [PATCH 2/6] chore: PR comments and add unit tests --- .../sidebar-toggle-button/README.md | 10 +- .../SidebarToggleButton.js | 38 +- .../SidebarToggleButton.scss | 6 +- .../__tests__/SidebarToggleButton-test.js | 35 ++ .../SidebarToggleButton-test.js.snap | 385 ++++++++++++++++++ src/elements/content-sidebar/SidebarNav.js | 2 +- src/elements/content-sidebar/SidebarNav.scss | 9 +- .../__snapshots__/SidebarNav-test.js.snap | 2 +- 8 files changed, 468 insertions(+), 19 deletions(-) create mode 100644 src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js create mode 100644 src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap diff --git a/src/components/sidebar-toggle-button/README.md b/src/components/sidebar-toggle-button/README.md index e3c9b28f20..8912216d64 100644 --- a/src/components/sidebar-toggle-button/README.md +++ b/src/components/sidebar-toggle-button/README.md @@ -1,12 +1,14 @@ ### Examples **Open** ```js -const isOpen = true; - + ``` **Closed** ```js -const isOpen = true; - + +``` +**When sidebar is on the left, change the direction** +```js + ``` diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js index 8a74a7b345..1a25cf36f5 100644 --- a/src/components/sidebar-toggle-button/SidebarToggleButton.js +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js @@ -12,24 +12,48 @@ import messages from '../../elements/common/messages'; import './SidebarToggleButton.scss'; +const DIRECTION_LEFT = 'left'; +const DIRECTION_RIGHT = 'right'; + type Props = { - isOpen: Boolean, + className?: string, + direction?: string, + isOpen: boolean, onClick?: Function, } & InjectIntlProvidedProps; -const SidebarToggleButton = ({ intl, isOpen, onClick, ...rest }: Props) => { +const SidebarToggleButton = ({ + className = '', + direction = DIRECTION_RIGHT, + intl, + isOpen, + onClick, + ...rest +}: Props) => { const isCollapsed = !isOpen ? 'collapsed' : ''; const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow; const intlText = intl.formatMessage(intlMessage); - const classes = classNames({ - 'bdl-SidebarToggleButton': true, - 'bdl-is-collapsed': isCollapsed, - }); + const classes = classNames( + { + [`${className}`]: !!className, + }, + 'bdl-SidebarToggleButton', + { + 'bdl-is-collapsed': isCollapsed, + }, + ); + + const renderButton = () => { + if (direction === DIRECTION_LEFT) { + return isOpen ? : ; + } + return isOpen ? : ; + }; return ( - {isOpen ? : } + {renderButton()} ); diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.scss b/src/components/sidebar-toggle-button/SidebarToggleButton.scss index ce788854ef..490a9ee003 100644 --- a/src/components/sidebar-toggle-button/SidebarToggleButton.scss +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.scss @@ -1,11 +1,7 @@ @import '../../styles/variables'; -.bdl-SidebarToggleButton, -.bdl-SidebarToggleButton:hover, -.bdl-SidebarToggleButton:active, -.bdl-SidebarToggleButton:focus { +.bdl-SidebarToggleButton { border-radius: $bdl-border-radius-size; - height: 24px; margin: 0 3px; padding: 4px; diff --git a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js new file mode 100644 index 0000000000..7e4843a9fa --- /dev/null +++ b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js @@ -0,0 +1,35 @@ +import React from 'react'; + +import SidebarToggleButton from '..'; + +describe('components/sidebar-toggle-button/SidebarToggleButton', () => { + test('should render correctly as open', () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); + + test('should render correctly as closed', () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); + + test('should have the proper class when it is collapsed', () => { + const wrapper = mount(); + + expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy(); + }); + + test('should render correctly as left oriented toggle when open', () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); + + test('should render correctly as left oriented toggle when closed', () => { + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap new file mode 100644 index 0000000000..85d3e1e41d --- /dev/null +++ b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap @@ -0,0 +1,385 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as closed 1`] = ` + + + + } + classPrefix="tooltip" + constraints={ + Array [ + Object { + "attachment": "together", + "to": "window", + }, + ] + } + enabled={false} + renderElementTag="div" + renderElementTo={null} + targetAttachment="middle left" + > + + + + + + + +`; + +exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when closed 1`] = ` + + + + } + classPrefix="tooltip" + constraints={ + Array [ + Object { + "attachment": "together", + "to": "window", + }, + ] + } + enabled={false} + renderElementTag="div" + renderElementTo={null} + targetAttachment="middle left" + > + + + + + + + +`; + +exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when open 1`] = ` + + + + } + classPrefix="tooltip" + constraints={ + Array [ + Object { + "attachment": "together", + "to": "window", + }, + ] + } + enabled={false} + renderElementTag="div" + renderElementTo={null} + targetAttachment="middle left" + > + + + + + + + +`; + +exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as open 1`] = ` + + + + } + classPrefix="tooltip" + constraints={ + Array [ + Object { + "attachment": "together", + "to": "window", + }, + ] + } + enabled={false} + renderElementTag="div" + renderElementTo={null} + targetAttachment="middle left" + > + + + + + + + +`; diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js index a9faa71c67..05edf7eb54 100644 --- a/src/elements/content-sidebar/SidebarNav.js +++ b/src/elements/content-sidebar/SidebarNav.js @@ -95,7 +95,7 @@ const SidebarNav = ({ )} {hasAdditionalTabs && }
-
+
{ diff --git a/src/elements/content-sidebar/SidebarNav.scss b/src/elements/content-sidebar/SidebarNav.scss index c10f9da89c..f4d5591f52 100644 --- a/src/elements/content-sidebar/SidebarNav.scss +++ b/src/elements/content-sidebar/SidebarNav.scss @@ -8,10 +8,17 @@ justify-content: space-between; } - .bcs-SidebarNav-toggle { + .bcs-SidebarNav-footer { align-items: center; display: flex; height: 60px; justify-content: center; + + // Need to add these overriding styles because there is a specificity issue with .btn-plain + .btn-plain.bdl-SidebarToggleButton { + height: 24px; + margin: 0 3px; + padding: 4px; + } } } diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap index 55aade6167..12ce120056 100644 --- a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap +++ b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap @@ -132,7 +132,7 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l
Date: Thu, 13 Jun 2019 10:46:31 -0700 Subject: [PATCH 3/6] chore: fix classes --- src/components/sidebar-toggle-button/SidebarToggleButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js index 1a25cf36f5..9226fcbee6 100644 --- a/src/components/sidebar-toggle-button/SidebarToggleButton.js +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js @@ -35,7 +35,7 @@ const SidebarToggleButton = ({ const intlText = intl.formatMessage(intlMessage); const classes = classNames( { - [`${className}`]: !!className, + [className]: !!className, }, 'bdl-SidebarToggleButton', { From 50ef73366d24ef1c7098325ce0e16d7791d53382 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Thu, 13 Jun 2019 11:09:12 -0700 Subject: [PATCH 4/6] chore: add e2e tests --- .../SidebarToggleButton.js | 12 +++------ src/elements/common/interactionTargets.js | 1 + src/elements/content-sidebar/SidebarNav.js | 2 ++ .../__snapshots__/SidebarNav-test.js.snap | 8 ++++++ .../ContentSidebar.e2e.test.js | 26 +++++++++++++++++++ 5 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js index 9226fcbee6..27cecaa53e 100644 --- a/src/components/sidebar-toggle-button/SidebarToggleButton.js +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js @@ -33,15 +33,9 @@ const SidebarToggleButton = ({ const isCollapsed = !isOpen ? 'collapsed' : ''; const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow; const intlText = intl.formatMessage(intlMessage); - const classes = classNames( - { - [className]: !!className, - }, - 'bdl-SidebarToggleButton', - { - 'bdl-is-collapsed': isCollapsed, - }, - ); + const classes = classNames(className, 'bdl-SidebarToggleButton', { + 'bdl-is-collapsed': isCollapsed, + }); const renderButton = () => { if (direction === DIRECTION_LEFT) { diff --git a/src/elements/common/interactionTargets.js b/src/elements/common/interactionTargets.js index 2fad7f7550..2d98892388 100644 --- a/src/elements/common/interactionTargets.js +++ b/src/elements/common/interactionTargets.js @@ -3,6 +3,7 @@ export const SIDEBAR_NAV_TARGETS = { DETAILS: 'sidebardetails', SKILLS: 'sidebarskills', METADATA: 'sidebarmetadata', + TOGGLE: 'sidebartoggle', }; export const SECTION_TARGETS = { diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js index 05edf7eb54..f60fa22680 100644 --- a/src/elements/content-sidebar/SidebarNav.js +++ b/src/elements/content-sidebar/SidebarNav.js @@ -97,6 +97,8 @@ const SidebarNav = ({
{ if (onNavigate) { diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap index 12ce120056..f24ec1c5fd 100644 --- a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap +++ b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap @@ -135,9 +135,13 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l className="bcs-SidebarNav-footer" > { cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected'); cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected'); }); + + it('should toggle sidebar content when a user clicks the toggle sidebar button', () => { + cy.getByTestId('bcs-content').should('exist'); + cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected'); + + cy.getByTestId('sidebartoggle').click(); + cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected'); + cy.getByTestId('bcs-content').should('not.exist'); + + cy.getByTestId('sidebartoggle').click(); + cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected'); + cy.getByTestId('bcs-content').should('exist'); + }); + + it('should toggle sidebar content when using a combination of toggle sidebar button and sidebar tab', () => { + cy.getByTestId('bcs-content').should('exist'); + cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected'); + + cy.getByTestId('sidebartoggle').click(); + cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected'); + cy.getByTestId('bcs-content').should('not.exist'); + + cy.getByTestId('sidebaractivity').click(); + cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected'); + cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected'); + }); }); describe('version history', () => { From f76fa4c6de3237c1b9102dd81b14b7a88161b145 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Thu, 13 Jun 2019 11:16:37 -0700 Subject: [PATCH 5/6] chore: update README.md --- src/components/sidebar-toggle-button/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/sidebar-toggle-button/README.md b/src/components/sidebar-toggle-button/README.md index 8912216d64..6fa7715fc0 100644 --- a/src/components/sidebar-toggle-button/README.md +++ b/src/components/sidebar-toggle-button/README.md @@ -1,7 +1,7 @@ ### Examples **Open** ```js - + ``` **Closed** ```js @@ -9,6 +9,6 @@ ``` **When sidebar is on the left, change the direction** ```js - + ``` From 3a7669f8582f131a13576ac88dc3bdf15fc93cae Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Thu, 13 Jun 2019 12:54:08 -0700 Subject: [PATCH 6/6] chore: decouple resin tags from data testids --- .../SidebarToggleButton.js | 3 ++- .../SidebarToggleButton-test.js.snap | 12 ++++++------ src/elements/content-sidebar/SidebarNav.js | 14 +++++++++----- .../content-sidebar/SidebarNavButton.js | 17 +++++++++++++---- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js index 27cecaa53e..426412d4b7 100644 --- a/src/components/sidebar-toggle-button/SidebarToggleButton.js +++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js @@ -36,6 +36,7 @@ const SidebarToggleButton = ({ const classes = classNames(className, 'bdl-SidebarToggleButton', { 'bdl-is-collapsed': isCollapsed, }); + const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left'; const renderButton = () => { if (direction === DIRECTION_LEFT) { @@ -45,7 +46,7 @@ const SidebarToggleButton = ({ }; return ( - + {renderButton()} diff --git a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap index 85d3e1e41d..e779a1a9a0 100644 --- a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap +++ b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap @@ -114,12 +114,12 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr constrainToScrollParent={false} constrainToWindow={true} isDisabled={false} - position="middle-left" + position="middle-right" text="Show Sidebar" theme="default" > } classPrefix="tooltip" constraints={ @@ -133,7 +133,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr enabled={false} renderElementTag="div" renderElementTo={null} - targetAttachment="middle left" + targetAttachment="middle right" > } classPrefix="tooltip" constraints={ @@ -230,7 +230,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr enabled={false} renderElementTag="div" renderElementTo={null} - targetAttachment="middle left" + targetAttachment="middle right" > {hasActivity && ( { if (onNavigate) { diff --git a/src/elements/content-sidebar/SidebarNavButton.js b/src/elements/content-sidebar/SidebarNavButton.js index 4449e2bc17..9eb26ef8a9 100644 --- a/src/elements/content-sidebar/SidebarNavButton.js +++ b/src/elements/content-sidebar/SidebarNavButton.js @@ -11,15 +11,24 @@ import Tooltip from '../../components/tooltip/Tooltip'; import './SidebarNavButton.scss'; type Props = { + 'data-resin-target'?: string, + 'data-testid'?: string, children: React.Node, - interactionTarget: string, isOpen?: boolean, onNavigate?: (SyntheticEvent<>, NavigateOptions) => void, sidebarView: string, tooltip: React.Node, }; -const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sidebarView, tooltip }: Props) => { +const SidebarNavButton = ({ + children, + 'data-resin-target': dataResinTarget, + 'data-testid': dataTestId, + isOpen, + onNavigate, + sidebarView, + tooltip, +}: Props) => { const sidebarPath = `/${sidebarView}`; return ( @@ -35,8 +44,8 @@ const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sid aria-selected={isActive()} activeClassName="bcs-is-selected" className="bcs-NavButton" - data-resin-target={interactionTarget} - data-testid={interactionTarget} + data-resin-target={dataResinTarget} + data-testid={dataTestId} isActive={isActive} onClick={event => { if (onNavigate) {