feat(Toolbar): add Toolbar component

config/jest.config.js

@@ -26,6 +26,7 @@ module.exports = {
   transformIgnorePatterns: ['node_modules/(?!(@ui5|lit-html))'],
   moduleNameMapper: {
     '^@shared/(.*)$': '<rootDir>/shared/$1',
+    '^@tests/(.*)$': '<rootDir>/shared/tests/$1',
     '^@ui5/webcomponents-react/dist/(.*)$': '<rootDir>/packages/main/dist/$1',
     '^@ui5/webcomponents-react/(.*)$': '<rootDir>/packages/main/src/$1',
     '^@ui5/webcomponents-react-base/third-party/(.*)$': '<rootDir>/packages/base/third-party/$1',

config/jestsetup.ts

@@ -7,6 +7,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import 'intersection-observer';
 import '@ui5/webcomponents/dist/generated/json-imports/i18n';
 import 'whatwg-fetch';
+import '@testing-library/jest-dom';
 
 // React 16 Enzyme adapter
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -50,6 +50,7 @@
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
     "@storybook/storybook-deployer": "^2.8.5",
+    "@testing-library/jest-dom": "^5.8.0",
     "@testing-library/react": "^10.0.4",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.3",

packages/base/src/styling/CssSizeVariables.ts

@@ -15,7 +15,10 @@ export enum CssSizeVariablesNames {
   sapWcrAnalyticalTableTreePaddingLevel2 = 'sapWcrAnalyticalTableTreePaddingLevel2',
   sapWcrAnalyticalTableTreePaddingLevel3 = 'sapWcrAnalyticalTableTreePaddingLevel3',
   sapWcrCheckBoxWidthHeight = 'sapWcrCheckBoxWidthHeight',
-  sapWcrAnalyticalTableSelectionColumnWidth = 'sapWcrAnalyticalTableSelectionColumnWidth'
+  sapWcrAnalyticalTableSelectionColumnWidth = 'sapWcrAnalyticalTableSelectionColumnWidth',
+  sapWcrToolbarHeight = 'sapWcrToolbarHeight',
+  sapWcrToolbarPopoverContentPadding = 'sapWcrToolbarPopoverContentPadding',
+  sapWcrToolbarSeparatorHeight = 'sapWcrToolbarSeparatorHeight'
 }
 
 export const CssSizeVariables: Record<CssSizeVariablesNames, string> = Object.values(CssSizeVariablesNames).reduce(
@@ -45,7 +48,9 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2.75rem;
   --${CssSizeVariablesNames.sapWcrCheckBoxWidthHeight}:2.75rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:55px;
-
+  --${CssSizeVariablesNames.sapWcrToolbarHeight}:2.75rem;
+  --${CssSizeVariablesNames.sapWcrToolbarPopoverContentPadding}:0.25rem 0.5rem;
+  --${CssSizeVariablesNames.sapWcrToolbarSeparatorHeight}: 2rem;
 }
 
 [data-ui5-compact-size],
@@ -67,5 +72,8 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2rem;
   --${CssSizeVariablesNames.sapWcrCheckBoxWidthHeight}:2rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:40px;
+  --${CssSizeVariablesNames.sapWcrToolbarHeight}:2rem;
+  --${CssSizeVariablesNames.sapWcrToolbarPopoverContentPadding}:0.1875rem 0.375rem;
+  --${CssSizeVariablesNames.sapWcrToolbarSeparatorHeight}: 1.5rem;
 }
 `;

packages/main/src/components/ThemeProvider/index.tsx

@@ -11,14 +11,6 @@ import { GlobalStyleClassesStyles } from './GlobalStyleClasses.jss';
 
 const useStyles = createComponentStyles(GlobalStyleClassesStyles);
 
-declare global {
-  interface Window {
-    CSSVarsPonyfill: {
-      cssVars: (options: any) => void;
-    };
-  }
-}
-
 const cssVarsPonyfillNeeded = () => !!window.CSSVarsPonyfill;
 
 export interface ThemeProviderProps {

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -0,0 +1,73 @@
+import '@ui5/webcomponents-icons/dist/icons/overflow';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
+import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
+import { Popover } from '@ui5/webcomponents-react/lib/Popover';
+import { ToggleButton } from '@ui5/webcomponents-react/lib/ToggleButton';
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export function OverflowPopover(props) {
+  const { lastVisibleIndex, contentClass, children } = props;
+  const popoverRef = useRef();
+  const [pressed, setPressed] = useState(false);
+
+  const handleToggleButtonClick = (e) => {
+    if (popoverRef.current) {
+      if (!pressed) {
+        popoverRef.current.openBy(e.target);
+        setPressed(true);
+      } else {
+        popoverRef.current.close();
+      }
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (popoverRef.current) {
+        popoverRef.current.close();
+      }
+    };
+  }, []);
+
+  const handleClose = () => {
+    setPressed(false);
+  };
+
+  const renderChildren = useCallback(() => {
+    return React.Children.toArray(children).map((item: ReactElement<any>, index) => {
+      if (index > lastVisibleIndex) {
+        if (item.type.displayName === 'ToolbarSeparator') {
+          return React.cloneElement(item, {
+            style: {
+              height: '0.0625rem',
+              margin: '0.375rem 0.1875rem',
+              width: '100%',
+              background: ThemingParameters.sapToolbar_SeparatorColor
+            }
+          });
+        }
+        return item;
+      }
+      return null;
+    });
+  }, [children, lastVisibleIndex]);
+
+  return (
+    <>
+      <ToggleButton
+        design={ButtonDesign.Transparent}
+        icon="sap-icon://overflow"
+        onClick={handleToggleButtonClick}
+        pressed={pressed}
+      />
+      {createPortal(
+        <Popover placementType={PlacementType.Bottom} ref={popoverRef} onAfterClose={handleClose}>
+          <div className={contentClass}>{renderChildren()}</div>
+        </Popover>,
+        document.body
+      )}
+    </>
+  );
+}

packages/main/src/components/Toolbar/Toolbar.jss.ts

@@ -0,0 +1,75 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
+
+export const styles = {
+  outerContainer: {
+    width: '100%',
+    height: CssSizeVariables.sapWcrToolbarHeight,
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottom: `solid 0.0625rem ${ThemingParameters.sapGroup_TitleBorderColor}`
+  },
+  hasOverflow: {
+    '& $toolbar': {
+      maxWidth: 'calc(100% - 44px)'
+    }
+  },
+  clear: {
+    borderBottom: 'none'
+  },
+  active: {
+    cursor: 'pointer',
+    '&:active': {
+      backgroundColor: ThemingParameters.sapActiveColor
+    },
+    '&:hover': {
+      backgroundColor: ThemingParameters.sapList_Hover_Background
+    }
+  },
+  info: {
+    // This color is most similar to darken(@sapUiBaseColor, 10)
+    backgroundColor: ThemingParameters.sapList_HeaderBorderColor,
+    '&$active': {
+      backgroundColor: ThemingParameters.sapInfobar_Active_Background,
+      '&:active': {
+        backgroundColor: `${ThemingParameters.sapInfobar_Active_Background}`
+      },
+      '&:hover': {
+        backgroundColor: ThemingParameters.sapInfobar_Hover_Background
+      }
+    }
+  },
+  solid: {
+    backgroundColor: ThemingParameters.sapBackgroundColor
+  },
+  transparent: {
+    backgroundColor: ThemingParameters.sapToolbar_Background
+  },
+  toolbar: {
+    width: '100%',
+    '& >:first-child:not(.spacer)': {
+      margin: '0 0.25rem 0 0'
+    },
+    '& >:last-child:not(.spacer)': {
+      margin: '0 0.5rem 0 0.25rem'
+    },
+    '& > *:not(first-child):not(last-child):not(.spacer)': {
+      margin: '0 0.25rem'
+    },
+    display: 'flex',
+    alignItems: 'center',
+    maxWidth: '100%'
+  },
+  overflowButtonContainer: {
+    marginRight: '0.5rem'
+  },
+  popoverContent: {
+    maxWidth: '20rem',
+    padding: CssSizeVariables.sapWcrToolbarPopoverContentPadding,
+    display: 'flex',
+    flexDirection: 'column'
+  }
+};

packages/main/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,80 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import React from 'react';
+import { Text } from '@ui5/webcomponents-react/lib/Text';
+import { ToolbarDesign } from '@ui5/webcomponents-react/lib/ToolbarDesign';
+import { Button } from '@ui5/webcomponents-react/lib/Button';
+import { ToolbarStyle } from '@ui5/webcomponents-react/lib/ToolbarStyle';
+import { ToolbarSeparator } from '@ui5/webcomponents-react/lib/ToolbarSeparator';
+import { ToolbarSpacer } from '@ui5/webcomponents-react/lib/ToolbarSpacer';
+import { Toolbar } from '@ui5/webcomponents-react/lib/Toolbar';
+
+export const renderStory = () => {
+  return (
+    <Toolbar
+      active={boolean('active', false)}
+      toolbarStyle={select<ToolbarStyle>('toolbarStyle', ToolbarStyle, ToolbarStyle.Standard)}
+      design={select<ToolbarDesign>('design', ToolbarDesign, ToolbarDesign.Auto)}
+      onToolbarClick={action('onToolbarClick')}
+    >
+      <Text>Item1</Text>
+      <Button
+        onClick={(e) => {
+          //use e.stopPropagation() to prevent event bubbling
+          e.stopPropagation();
+        }}
+      >
+        Item2
+      </Button>
+      <Button>Item3</Button>
+      <Button>Item4</Button>
+      <Button>Item5</Button>
+      <Text>Item6</Text>
+      <Button>Item8</Button>
+      <Button>Item9</Button>
+      <Button>Item10</Button>
+      <Button>Item11</Button>
+      <Button>Item12</Button>
+    </Toolbar>
+  );
+};
+
+renderStory.story = {
+  name: 'Default'
+};
+
+export const withSpacerAndSeparator = () => {
+  return (
+    <Toolbar
+      active={boolean('active', false)}
+      toolbarStyle={select<ToolbarStyle>('toolbarStyle', ToolbarStyle, ToolbarStyle.Standard)}
+      design={select<ToolbarDesign>('design', ToolbarDesign, ToolbarDesign.Auto)}
+      onToolbarClick={action('onToolbarClick')}
+    >
+      <ToolbarSpacer />
+      <Text>Item1</Text>
+      <Button>Item2</Button>
+      <ToolbarSpacer />
+      <Button>Item3</Button>
+      <Button>Item4</Button>
+      <Button>Item5</Button>
+      <Text>Item6</Text>
+      <Button>Item8</Button>
+      <ToolbarSeparator />
+      <Button>Item9</Button>
+      <Button>Item10</Button>
+      <ToolbarSeparator />
+      <Button>Item11</Button>
+      <Button>Item12</Button>
+    </Toolbar>
+  );
+};
+
+withSpacerAndSeparator.story = {
+  name: 'with spacer and separator'
+};
+
+export default {
+  title: 'Components / Toolbar',
+  component: Toolbar
+};