Merge pull request #374 from brightlayer-ui/dev

Publish Package 5.4.0
etn-ccis · Feb 8, 2022 · 457891c · 457891c
2 parents c47fbfb + 49eb097
commit 457891c
Show file tree

Hide file tree

Showing 42 changed files with 1,370 additions and 57 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,4 +1,4 @@
 [submodule "demos/showcase"]
 	path = demos/showcase
-	url = https://github.com/pxblue/react-showcase-demo
+	url = https://github.com/brightlayer-ui/react-showcase-demo
 	branch = dev
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,23 @@
 # Changelog
+
+## v5.4.0 (February 8, 2022)
+
+### Added
+
+-   Added `chevronColor` property to `<InfoListItem>` and SharedProps of `<Drawer>`.
+-   Added class override for `chevron` on `<InfoListItem>` and `<DrawerNavItem>`.
+-   Added `titleDivider` property onto `<DrawerNavGroup>`. ([#315](https://github.com/brightlayer-ui/react-component-library/issues/315))
+-   Added 1rem default padding to the root styles of `<EmptyState>`. ([#320](https://github.com/brightlayer-ui/react-component-library/issues/320))
+-   Added new property `unitSpace` to `<ChannelValue>` to manage spacing between the value and units. ([#350](https://github.com/brightlayer-ui/react-component-library/issues/350))
+-   Added `<ToolbarMenu>` component. ([#351](https://github.com/brightlayer-ui/react-component-library/issues/351))
+-   Added Deprecation warnings for DropdownToolbar component that will be removed in version 6.0.0.
+
 ## v5.3.3 (December 6, 2021)
 
 ### Fixed
 
--   Avoid rendering of HTML elements in DOM when `subtitle` or `info` prop is not available.
+-   Avoid rendering of HTML elements in `<InfoListItem>`'s DOM tree when `subtitle` or `info` prop is not available. ([#318](https://github.com/brightlayer-ui/react-component-library/issues/318))
+
 ## v5.3.2 (November 11, 2021)
 
 ### Changed

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 This is a library of re-usable React components for use in Brightlayer UI applications. For the most part, these components are meant to simplify building your application by providing drop-in components that implement common use cases in Brightlayer UI and eliminate the need for multiple teams to build their own components for these.
 
-Refer to the [Component Library](https://brightlayer-ui-components.github.io/react/?path=/story/channel-value--with-value) API documentation site for a list of available components or see the repository [documentation](https://github.com/brightlayer-ui/react-component-library/tree/dev/docs) for each individual component.
+Refer to the [Component Library](https://brightlayer-ui-components.github.io/react/?path=/story/channel-value--with-value) API documentation site for a list of available components or see the repository [documentation](https://github.com/brightlayer-ui/react-component-library/tree/master/docs) for each individual component.
 
 ## Installation
 
@@ -58,7 +58,7 @@ from the root directory.
 
 ## Using the Components
 
-See the [documentation](https://github.com/brightlayer-ui/react-component-library/tree/dev/docs) for information on using these components.
+See the [documentation](https://github.com/brightlayer-ui/react-component-library/tree/master/docs) for information on using these components.
 
 ## Browser Support
 

diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-components",
-    "version": "5.3.3",
+    "version": "5.4.0",
     "description": "React components for Brightlayer UI applications",
     "scripts": {
         "test": "jest src",
@@ -14,14 +14,15 @@
     "prettier": "@brightlayer-ui/prettier-config",
     "dependencies": {
         "@brightlayer-ui/colors": "^3.0.0",
+        "@seznam/compose-react-refs": "^1.0.6",
         "color": "^3.1.2"
     },
     "devDependencies": {
-        "@material-ui/core": "^4.11.0",
-        "@material-ui/icons": "^4.0.0",
         "@brightlayer-ui/eslint-config": "^2.0.1",
         "@brightlayer-ui/prettier-config": "^1.0.2",
         "@brightlayer-ui/react-themes": "^6.0.0",
+        "@material-ui/core": "^4.11.0",
+        "@material-ui/icons": "^4.0.0",
         "@types/color": "^3.0.1",
         "@types/enzyme": "^3.10.4",
         "@types/enzyme-adapter-react-16": "^1.0.5",
@@ -44,8 +45,8 @@
         "typescript": "^4.2.3"
     },
     "peerDependencies": {
-        "@material-ui/core": "^4.11.0",
         "@brightlayer-ui/colors": "^3.0.0",
+        "@material-ui/core": "^4.11.0",
         "react": "^16.0.0 || ^17.0.0",
         "react-dom": "^16.0.0 || ^17.0.0"
     },

diff --git a/components/src/core/ChannelValue/ChannelValue.tsx b/components/src/core/ChannelValue/ChannelValue.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, HTMLAttributes } from 'react';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
@@ -32,11 +32,19 @@ export type ChannelValueProps = Omit<HTMLAttributes<HTMLSpanElement>, 'prefix'>
     prefix?: boolean;
     /** Text to display for the units (light text) */
     units?: string;
+    /** Whether to show a space between the value and units
+     *
+     * Default: auto (shows space except for white list items)
+     *
+     * prefixUnitAllowSpaceList: ['$'];
+     * suffixUnitAllowSpaceList: ['%', '℉','°F','℃','°C','°']
+     */
+    unitSpace?: 'show' | 'hide' | 'auto';
     /** Text to display for the value (bold text) */
     value: number | string;
 };
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
     createStyles({
         root: {
             display: 'inline-flex',
@@ -46,7 +54,7 @@ const useStyles = makeStyles((theme: Theme) =>
             color: (props: ChannelValueProps): string => props.color,
         },
         icon: {
-            marginRight: theme.spacing(0.5),
+            marginRight: '0.35em',
             display: 'inline',
             fontSize: 'inherit',
         },
@@ -55,11 +63,20 @@ const useStyles = makeStyles((theme: Theme) =>
             lineHeight: 'inherit',
             letterSpacing: 0,
         },
+        prefix: {
+            '& + h6': {
+                marginLeft: '0.25em',
+            },
+        },
+        suffix: {},
         units: {
             fontWeight: 300,
         },
         value: {
             fontWeight: 600,
+            '& + $suffix': {
+                marginLeft: '0.25em',
+            },
         },
     })
 );
@@ -78,6 +95,7 @@ const ChannelValueRender: React.ForwardRefRenderFunction<unknown, ChannelValuePr
         icon,
         prefix,
         units,
+        unitSpace,
         value,
         // ignore unused vars so that we can do prop transferring to the root element
         /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -87,6 +105,20 @@ const ChannelValueRender: React.ForwardRefRenderFunction<unknown, ChannelValuePr
         ...otherSpanProps
     } = props;
     const defaultClasses = useStyles(props);
+    const prefixUnitAllowSpaceList = ['$'];
+    const suffixUnitAllowSpaceList = ['%', '℉', '°F', '℃', '°C', '°'];
+
+    const applyPrefix = useCallback(
+        (): boolean =>
+            prefix && unitSpace !== 'hide' && (unitSpace === 'show' || !prefixUnitAllowSpaceList.includes(units)),
+        [prefix, units, unitSpace]
+    );
+
+    const applySuffix = useCallback(
+        (): boolean =>
+            !prefix && unitSpace !== 'hide' && (unitSpace === 'show' || !suffixUnitAllowSpaceList.includes(units)),
+        [prefix, units, unitSpace]
+    );
 
     const getUnitElement = useCallback(
         (): JSX.Element => (
@@ -95,15 +127,18 @@ const ChannelValueRender: React.ForwardRefRenderFunction<unknown, ChannelValuePr
                     <Typography
                         variant={'h6'}
                         color={'inherit'}
-                        className={clsx(defaultClasses.text, defaultClasses.units, classes.units)}
+                        className={clsx(defaultClasses.text, defaultClasses.units, classes.units, {
+                            [defaultClasses.prefix]: applyPrefix(),
+                            [defaultClasses.suffix]: applySuffix(),
+                        })}
                         data-test={'units'}
                     >
                         {units}
                     </Typography>
                 )}
             </>
         ),
-        [units, classes, defaultClasses]
+        [units, prefix, classes, defaultClasses, unitSpace]
     );
 
     return (
@@ -147,6 +182,7 @@ ChannelValue.propTypes = {
     icon: PropTypes.element,
     prefix: PropTypes.bool,
     units: PropTypes.string,
+    unitSpace: PropTypes.oneOf(['show', 'hide', 'auto']),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 ChannelValue.defaultProps = {

diff --git a/components/src/core/Drawer/Drawer.tsx b/components/src/core/Drawer/Drawer.tsx
@@ -142,6 +142,7 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
         activeItemIconColor,
         backgroundColor,
         chevron,
+        chevronColor,
         collapseIcon,
         disableActiveItemParentStyles,
         divider,
@@ -212,6 +213,7 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
                         activeItemIconColor: mergeStyleProp(activeItemIconColor, child.props.activeItemIconColor),
                         backgroundColor: mergeStyleProp(backgroundColor, child.props.backgroundColor),
                         chevron: mergeStyleProp(chevron, child.props.chevron),
+                        chevronColor: mergeStyleProp(chevronColor, child.props.chevronColor),
                         collapseIcon: mergeStyleProp(collapseIcon, child.props.collapseIcon),
                         disableActiveItemParentStyles: mergeStyleProp(
                             disableActiveItemParentStyles,
@@ -233,6 +235,7 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
             activeItemFontColor,
             activeItemIconColor,
             chevron,
+            chevronColor,
             collapseIcon,
             disableActiveItemParentStyles,
             divider,

diff --git a/components/src/core/Drawer/DrawerBody.tsx b/components/src/core/Drawer/DrawerBody.tsx
@@ -40,6 +40,7 @@ const DrawerBodyRender: React.ForwardRefRenderFunction<unknown, DrawerBodyProps>
         activeItemIconColor,
         backgroundColor,
         chevron,
+        chevronColor,
         collapseIcon,
         disableActiveItemParentStyles,
         divider,
@@ -85,6 +86,7 @@ const DrawerBodyRender: React.ForwardRefRenderFunction<unknown, DrawerBodyProps>
                         activeItemIconColor={mergeStyleProp(activeItemIconColor, groupProps.activeItemIconColor)}
                         backgroundColor={mergeStyleProp(backgroundColor, groupProps.backgroundColor)}
                         chevron={mergeStyleProp(chevron, groupProps.chevron)}
+                        chevronColor={mergeStyleProp(chevronColor, child.props.chevronColor)}
                         collapseIcon={mergeStyleProp(collapseIcon, groupProps.collapseIcon)}
                         disableActiveItemParentStyles={mergeStyleProp(
                             disableActiveItemParentStyles,

diff --git a/components/src/core/Drawer/DrawerNavGroup.tsx b/components/src/core/Drawer/DrawerNavGroup.tsx
@@ -33,6 +33,9 @@ export type DrawerNavGroupProps = SharedStyleProps &
 
         /** Custom element, substitute for title */
         titleContent?: ReactNode;
+
+        /** Divider for the title */
+        titleDivider?: boolean;
     };
 
 type DrawerNavGroupClasses = {
@@ -106,13 +109,15 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
         title,
         titleColor = theme.palette.text.primary,
         titleContent,
+        titleDivider = true,
         // Shared Style Props
         activeItemBackgroundColor,
         activeItemBackgroundShape,
         activeItemFontColor,
         activeItemIconColor,
         backgroundColor,
         chevron,
+        chevronColor,
         collapseIcon,
         disableActiveItemParentStyles,
         divider,
@@ -157,6 +162,7 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
                               activeItemIconColor: mergeStyleProp(activeItemIconColor, child.props.activeItemIconColor),
                               backgroundColor: mergeStyleProp(backgroundColor, child.props.backgroundColor),
                               chevron: mergeStyleProp(chevron, child.props.chevron),
+                              chevronColor: mergeStyleProp(chevronColor, child.props.chevronColor),
                               collapseIcon: mergeStyleProp(collapseIcon, child.props.collapseIcon),
                               disableActiveItemParentStyles: mergeStyleProp(
                                   disableActiveItemParentStyles,
@@ -205,6 +211,7 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
             activeItemIconColor,
             backgroundColor,
             chevron,
+            chevronColor,
             collapseIcon,
             disableActiveItemParentStyles,
             divider,
@@ -248,7 +255,9 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
                 }
                 {...otherListProps}
             >
-                {variant !== 'rail' && <div key={`${title}_title`}>{(title || titleContent) && <Divider />}</div>}
+                {variant !== 'rail' && (
+                    <div key={`${title}_title`}>{(title || titleContent) && titleDivider && <Divider />}</div>
+                )}
                 {items.map((drawerItem: DrawerNavItemProps | DrawerRailItemProps, index: number) => {
                     if (variant === 'rail') {
                         const railItem = drawerItem as DrawerRailItemProps;
@@ -308,6 +317,7 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
                             activeItemIconColor={mergeStyleProp(activeItemIconColor, navItem.activeItemIconColor)}
                             backgroundColor={mergeStyleProp(backgroundColor, navItem.backgroundColor)}
                             chevron={mergeStyleProp(chevron, navItem.chevron)}
+                            chevronColor={mergeStyleProp(chevronColor, navItem.chevronColor)}
                             collapseIcon={mergeStyleProp(collapseIcon, navItem.collapseIcon)}
                             disableActiveItemParentStyles={mergeStyleProp(
                                 disableActiveItemParentStyles,
@@ -379,6 +389,7 @@ DrawerNavGroup.propTypes = {
     title: PropTypes.string,
     titleColor: PropTypes.string,
     titleContent: PropTypes.element,
+    titleDivider: PropTypes.bool,
 };
 DrawerNavGroup.defaultProps = {
     classes: {},

diff --git a/components/src/core/Drawer/DrawerNavItem.tsx b/components/src/core/Drawer/DrawerNavItem.tsx
@@ -89,6 +89,11 @@ export type NestedNavItem = NestedDrawerNavItemProps;
 const calcNestedPadding = (theme: Theme, depth: number): number =>
     theme.spacing(depth ? (depth - 1) * 4 : 0) + theme.spacing(2);
 
+const getChevronColor = (props: DrawerNavItemProps, theme: Theme): string => {
+    const { chevronColor } = props;
+    return chevronColor ? chevronColor : theme.palette.text.secondary;
+};
+
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         active: {
@@ -106,6 +111,9 @@ const useStyles = makeStyles((theme: Theme) =>
                 borderRadius: 0,
             },
         },
+        chevron: {
+            color: (props) => getChevronColor(props, theme),
+        },
         drawerOpen: {},
         expanded: {},
         expandIcon: {
@@ -209,6 +217,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
         activeItemIconColor = theme.palette.type === 'light' ? theme.palette.primary.main : lightenedPrimary,
         backgroundColor,
         chevron,
+        chevronColor,
         children,
         classes = {},
         collapseIcon,
@@ -229,7 +238,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
         notifyActiveParent = (): void => {},
         onClick,
         rightComponent = props.chevron && !props.items && !props.children ? (
-            <ChevronRight className={defaultClasses.flipIcon} />
+            <ChevronRight className={clsx(defaultClasses.chevron, defaultClasses.flipIcon)} />
         ) : undefined,
         ripple = true,
         statusColor,
@@ -329,6 +338,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
                               activeItemIconColor: mergeStyleProp(activeItemIconColor, child.props.activeItemIconColor),
                               backgroundColor: mergeStyleProp(backgroundColor, child.props.backgroundColor),
                               chevron: mergeStyleProp(chevron, child.props.chevron),
+                              chevronColor: mergeStyleProp(chevronColor, child.props.chevronColor),
                               // we use props. because we don't want to pass the destructured default as the value to children
                               collapseIcon: mergeStyleProp(props.collapseIcon, child.props.collapseIcon),
                               disableActiveItemParentStyles: mergeStyleProp(
@@ -376,6 +386,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
             activeHierarchy,
             backgroundColor,
             chevron,
+            chevronColor,
             collapseIcon,
             disableActiveItemParentStyles,
             divider,
@@ -486,6 +497,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
                                     )}
                                     backgroundColor={mergeStyleProp(backgroundColor, subItem.backgroundColor)}
                                     chevron={mergeStyleProp(chevron, subItem.chevron)}
+                                    chevronColor={mergeStyleProp(chevronColor, subItem.chevronColor)}
                                     // we use props. because we don't want to pass the destructured default as the value to the children
                                     collapseIcon={mergeStyleProp(props.collapseIcon, subItem.collapseIcon)}
                                     disableActiveItemParentStyles={mergeStyleProp(

diff --git a/components/src/core/Drawer/types.tsx b/components/src/core/Drawer/types.tsx
@@ -45,6 +45,9 @@ export type NavItemSharedStyleProps = {
     /** Whether to have chevrons for all menu items */
     chevron?: boolean;
 
+    /** Color override for the chevron icon */
+    chevronColor?: string;
+
     /** Icon used to collapse nav group
      *
      * Default: expandIcon rotated 180 degrees
@@ -81,6 +84,7 @@ export const SharedStylePropTypes = {
 export const NavItemSharedStylePropTypes = {
     activeItemBackgroundShape: PropTypes.oneOf(['round', 'square']),
     chevron: PropTypes.bool,
+    chevronColor: PropTypes.string,
     collapseIcon: PropTypes.element,
     expandIcon: PropTypes.element,
     hidePadding: PropTypes.bool,