Skip to content

Commit

Permalink
feat: add compact option to product menu, remove console errors (#1446)
Browse files Browse the repository at this point in the history 
* feat: add compact option to product menu, remove console errors

* feat: add glyph to the settings menu
  • Loading branch information
@dariadomagala-sap
dariadomagala-sap authored Nov 3, 2022
1 parent c97c28f commit f618ab5
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 9 deletions.
2 changes: 1 addition & 1 deletion .storybook/custom/components/DocsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const DocsPage = () => {
<DocsStoryDescription />
</div>
<Heading>Examples</Heading>
{stories.map((story) => story && <DocsStory
{stories?.map((story) => story && <DocsStory
key={story.id}
{...story}
expanded
Expand Down
58 changes: 53 additions & 5 deletions src/Shellbar/Shellbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,52 @@ 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 @@ -441,7 +487,7 @@ class Shellbar extends Component {
className={classnames(`${cssNamespace}-shellbar__avatar--circle`)}
color={profile.colorAccent}
size='xs'>
{profile.initials}
{profile.glyph ? <Icon glyph={profile.glyph} /> : profile.initials}
</Avatar>
)}
</button>
Expand All @@ -451,7 +497,7 @@ class Shellbar extends Component {
</div>
</div>
)}
{productSwitch && (
{productSwitch && !productSwitch.compact && (
<div className={classnames(`${cssNamespace}-shellbar__action`, `${cssNamespace}-shellbar__action--desktop`)}>
<div className={classnames(`${cssNamespace}-product-switch`)}>
<Popover
Expand Down Expand Up @@ -542,17 +588,19 @@ 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
label: PropTypes.string.isRequired,
/** Renders the switch in a form of a dropdown */
compact: PropTypes.bool
}),
/** Array of objects containing data about the products.
* Callback, title, and glyph are required; selected and subtitle are optional. */
* Callback and title are required; selected, glyph and subtitle are optional. */
productSwitchList: PropTypes.arrayOf(
PropTypes.shape({
callback: PropTypes.func.isRequired,
/** Localized text for the heading */
title: PropTypes.string.isRequired,
/** The icon to include. See the icon page for the list of icons */
glyph: PropTypes.string.isRequired,
glyph: PropTypes.string,
/** For pre-selecting an item in the product switch list */
selected: PropTypes.bool,
subtitle: PropTypes.string
Expand Down
1 change: 1 addition & 0 deletions src/Shellbar/__stories__/Shellbar.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export const coPilot = () => (
}}
productMenu={productMenu}
productSwitch={{
compact: false,
label: 'Product Switch'
}}
productSwitchList={[
Expand Down
6 changes: 3 additions & 3 deletions src/SideNavigation/_SideNavListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class SideNavListItem extends React.Component {
href={url}
onClick={!hasChild ? (e) => {
!hasChild && onClick(e);
onItemSelect(e, id, hasChild);
if (onItemSelect) onItemSelect(e, id, hasChild);
} : null}>
{glyph ? (
<Icon
Expand Down Expand Up @@ -88,7 +88,7 @@ class SideNavListItem extends React.Component {
className={divClasses}
onClick={(e) => { /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
onClick(e);
onItemSelect(e, id, hasChild);
if (onItemSelect) onItemSelect(e, id, hasChild);
}}>
{link}
<Button
Expand Down Expand Up @@ -128,7 +128,7 @@ class SideNavListItem extends React.Component {
className: getClasses(),
onClick: (e) => {
onClick(e);
onItemSelect(e, id, hasChild);
if (onItemSelect) onItemSelect(e, id, hasChild);
if (hasChild) {
this.handleExpand();
}
Expand Down

0 comments on commit f618ab5

Please sign in to comment.