Skip to content

Commit

Permalink
feat: add an option to fire onclick event on actions menu, revert com…
Browse files Browse the repository at this point in the history 
…pact option for product switch (#1454)
  • Loading branch information
@dariadomagala-sap
dariadomagala-sap authored Nov 7, 2022
1 parent 8edfd75 commit 833da87
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 55 deletions.
56 changes: 5 additions & 51 deletions src/Shellbar/Shellbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,8 @@ class Shellbar extends Component {
aria-label={action.label}
className={classnames(`${cssNamespace}-shellbar__button`, { [`${cssNamespace}-button`]: isUsingCssModules })}
glyph={action.glyph}
iconBeforeText>
iconBeforeText
onClick={action.callback}>
{action.notificationCount > 0 && (
<Counter
aria-label={localizedText.counterLabel}
Expand All @@ -258,6 +259,7 @@ class Shellbar extends Component {
{action.notificationCount}
</Counter>
)}
{action.label}
</Button>
}
popperProps={{ id: `${cssNamespace}-shellbar-actions-popover-${index}` }} />
Expand Down Expand Up @@ -386,52 +388,6 @@ class Shellbar extends Component {
popperProps={{ id: `${cssNamespace}-shellbar-mobile-action-popover` }} />
</div>
}
{productSwitch && productSwitch.compact && (
<Popover
{...popoverPropsFor?.[productSwitch]}
body={
productSwitchList && (
<Menu>
<Menu.List>
{productSwitchList.map((item, index) => {
return (
<Menu.Item
key={index}
onClick={item.callback}>
{item.glyph && (
<>
<Icon glyph={item.glyph} size={item.size} />
&nbsp;&nbsp;&nbsp;
</>
)}
{item.title}
</Menu.Item>
);
})}
</Menu.List>
</Menu>
)
}
control={
<Button
className={classnames(
`${cssNamespace}-shellbar__button--menu`,
`${cssNamespace}-button--menu`,
{
[`${cssNamespace}-button`]: isUsingCssModules,
[buttonClassnames(`${cssNamespace}-button--menu`)]: isUsingCssModules
}
)}
glyph='megamenu'
iconProps={{ className: classnames(`${cssNamespace}-shellbar__button--icon`) }}
option='transparent'
textClassName={classnames(`${cssNamespace}-shellbar__title`)}>
{productSwitch.label}
</Button>
}
noArrow
popperProps={{ id: `${cssNamespace}-shellbar-product-popover` }} />
)}
{profile && (
<div className={classnames(`${cssNamespace}-shellbar__action`, `${cssNamespace}-shellbar__action--show-always`)}>
<div className={classnames(`${cssNamespace}-user-menu`)}>
Expand Down Expand Up @@ -497,7 +453,7 @@ class Shellbar extends Component {
</div>
</div>
)}
{productSwitch && !productSwitch.compact && (
{productSwitch && (
<div className={classnames(`${cssNamespace}-shellbar__action`, `${cssNamespace}-shellbar__action--desktop`)}>
<div className={classnames(`${cssNamespace}-product-switch`)}>
<Popover
Expand Down Expand Up @@ -588,9 +544,7 @@ Shellbar.propTypes = {
/** For navigating between products. An object that contains an accessible and localized label for product switch button. */
productSwitch: PropTypes.shape({
/** Accessible and localized label for product switch button */
label: PropTypes.string.isRequired,
/** Renders the switch in a form of a dropdown */
compact: PropTypes.bool
label: PropTypes.string.isRequired
}),
/** Array of objects containing data about the products.
* Callback and title are required; selected, glyph and subtitle are optional. */
Expand Down
2 changes: 2 additions & 0 deletions src/Shellbar/__stories__/__snapshots__/Shellbar.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ exports[`Storyshots Component API/Shellbar Co Pilot 1`] = `
>
5
</span>
Settings
</span>
</button>
</div>
Expand Down Expand Up @@ -609,6 +610,7 @@ exports[`Storyshots Component API/Shellbar Dev 1`] = `
>
5
</span>
Settings
</span>
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/SideNavigation/_SideNavListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ SideNavListItem.propTypes = {
id: PropTypes.string,
/** Internal use only */
isSubItem: PropTypes.bool,
/** Localized text for the item (when `url` is provided) */
name: PropTypes.string,
/** Localized text or React element for the item (when `url` is provided) */
name: PropTypes.oneOf[PropTypes.string, PropTypes.node],
/** Internal use only */
selected: PropTypes.bool,
/** Internal use only */
Expand Down
4 changes: 3 additions & 1 deletion src/SideNavigation/__stories__/SideNav.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* eslint-disable react/no-multi-comp */
import Icon from '../../Icon/Icon';
import React from 'react';
import SideNav from '../SideNav';
import SideNavList from '../_SideNavList';
Expand Down Expand Up @@ -38,7 +39,8 @@ export const primary = () => (
url='#' />
<SideNav.ListItem
id='item-5'
name='Link Item'
name={<>External Link Item <Icon glyph='action' /></>}
onClick={() => alert('Redirection')}
url='#' />
</SideNav.List>
</SideNav>
Expand Down
6 changes: 5 additions & 1 deletion src/SideNavigation/__stories__/__snapshots__/SideNav.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,7 +541,11 @@ exports[`Storyshots Component API/SideNav Primary 1`] = `
<span
className="fd-nested-list__title"
>
Link Item
External Link Item
<i
className="sap-icon--action"
role="img"
/>
</span>
</a>
</li>
Expand Down

0 comments on commit 833da87

Please sign in to comment.