Merge pull request #198 from pxblue/dev

Merge lastest changes to master

CHANGELOG.md

@@ -1,14 +1,26 @@
-# Change Log
+# Changelog
+
+## v4.1.1
+
+### Changed
+
+-   Hides Drawer Nav Item's title when the `<Drawer>` collapses in the `persistent` variant
+-   Improved some icon flipping logic for RTL
 
 ## v4.1.0
 
--   Fixes RTL support issues in the `<DrawerLayout>`/`<Drawer>`
--   Fixes an issue with text wrapping in the `<InfoListItem>` subtitle
--   Fixes an issue with hover color alpha channel in `<InfoListItem>`
+### Added
+
 -   Adds `iconAlign` prop to `<InfoListItem>` to align icon left (default), center or right
 -   Adds optional prop to the `<DrawerHeader>` to add a bottom divider
 -   Adds `<DropdownToolbar>` component
 
+### Fixed
+
+-   Fixes RTL support issues in the `<DrawerLayout>`/`<Drawer>`
+-   Fixes an issue with text wrapping in the `<InfoListItem>` subtitle
+-   Fixes an issue with hover color alpha channel in `<InfoListItem>`
+
 ## v4.0.2
 
 -   Updates several prop types to `ReactNode` to support wider range of input values.

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pxblue/react-components",
-    "version": "4.1.0",
+    "version": "4.1.1",
     "description": "React components for PX Blue applications",
     "scripts": {
         "test": "jest src",

components/src/core/Drawer/Drawer.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { InfoListItemProps as BaseInfoListItemProps } from '../InfoListItem';
 import { useDrawerLayout } from '../DrawerLayout/contexts/DrawerLayoutContextProvider';
+import { DrawerContext } from './DrawerContext';
 
 const useStyles = makeStyles({
     paper: {
@@ -282,14 +283,16 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerComponentPro
                 {
                     minHeight: '100%',
                     width: containerWidth,
-                    transition: 'width 175ms cubic-bezier(.4, 0, .2, 1)',
+                    transition: theme.transitions.create('width'),
                 },
                 drawerProps.style
             )}
         >
-            <div className={clsx(defaultClasses.content, classes.content)} style={{ width: contentWidth }}>
-                {getDrawerContents()}
-            </div>
+            <DrawerContext.Provider value={{ isOpen: isDrawerOpen() }}>
+                <div className={clsx(defaultClasses.content, classes.content)} style={{ width: contentWidth }}>
+                    {getDrawerContents()}
+                </div>
+            </DrawerContext.Provider>
         </Drawer>
     );
 };

components/src/core/Drawer/DrawerContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+type DrawerContextType = {
+    isOpen: boolean;
+};
+
+export const DrawerContext = createContext<DrawerContextType>({ isOpen: true });
+
+export const useDrawerContext = (): DrawerContextType => useContext(DrawerContext);

components/src/core/Drawer/DrawerNavItem.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import { PXBlueDrawerInheritableProperties } from './Drawer';
 import { DrawerNavGroupProps } from './DrawerNavGroup';
 import { InfoListItem } from '../InfoListItem';
+import { useDrawerContext } from './DrawerContext';
 
 export type NavItem = {
     // icon on the left
@@ -97,6 +98,15 @@ const useStyles = makeStyles((theme: Theme) =>
         nestedTitle: {
             fontWeight: 400,
         },
+        noIconTitle: {
+            opacity: 0,
+            transition: theme.transitions.create('opacity'),
+            '&$drawerOpen': {
+                opacity: 1,
+                transition: theme.transitions.create('opacity'),
+            },
+        },
+        drawerOpen: {},
     })
 );
 
@@ -112,6 +122,7 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<unknown, DrawerNavItem
 
     const defaultClasses = useStyles(props);
     const theme = useTheme();
+    const { isOpen } = useDrawerContext();
 
     const primary50Color = theme.palette.primary.light;
     const { activeItem, classes, nestedDivider } = navGroupProps;
@@ -199,7 +210,16 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<unknown, DrawerNavItem
     const active = activeItem === itemID;
     const infoListItemClasses = {
         root: defaultClasses.infoListItem,
-        title: depth > 0 ? clsx(defaultClasses.nestedTitle, classes.nestedTitle) : '',
+        title: clsx({
+            [defaultClasses.nestedTitle]: depth > 0,
+            [classes.nestedTitle]: depth > 0,
+            [defaultClasses.noIconTitle]: hidePadding && !icon,
+            [defaultClasses.drawerOpen]: isOpen,
+        }),
+        subtitle: clsx({
+            [defaultClasses.noIconTitle]: hidePadding && !icon,
+            [defaultClasses.drawerOpen]: isOpen,
+        }),
     };
 
     return (

components/src/core/EmptyState/EmptyState.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     icon: {
         marginBottom: theme.spacing(2),
         display: 'flex',
-        fontSize: 100,
+        fontSize: 96,
     },
     actions: {
         marginTop: theme.spacing(1),

components/src/core/InfoListItem/InfoListItem.tsx

@@ -173,6 +173,7 @@ const InfoListItemRender: React.ForwardRefRenderFunction<unknown, InfoListItemPr
                 }}
                 secondaryTypographyProps={{
                     variant: 'subtitle2',
+                    color: 'textPrimary',
                 }}
             />
             {getRightComponent()}

demos/storybook/src/utils.tsx

@@ -1,6 +1,7 @@
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
 import React from 'react';
 import { COMPONENT_SECTION_NAME, README_STORY_NAME } from './constants';
+import { getDirection } from '@pxblue/storybook-rtl-addon';
 
 let banner: HTMLElement;
 
@@ -95,3 +96,6 @@ export const getReadMe = (name: string): any => {
     });
     return md;
 };
+
+export const getLeftToRightIconTransform = (): any =>
+    getDirection() === 'rtl' ? { transform: 'scaleX(-1)' } : undefined;

demos/storybook/stories/channel-value/with-fontSize.tsx

@@ -3,13 +3,14 @@ import * as Colors from '@pxblue/colors';
 import { ChannelValue } from '@pxblue/react-components';
 import { number } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { getLeftToRightIconTransform } from '../../src/utils';
 import React from 'react';
 
 export const withFontSize = (): StoryFnReactReturnType => (
     <ChannelValue
         value={'123'}
         units={'hz'}
-        icon={<Trend htmlColor={Colors.red[500]} />}
+        icon={<Trend htmlColor={Colors.red[500]} style={getLeftToRightIconTransform()} />}
         fontSize={number('fontSize', 30)}
     />
 );

demos/storybook/stories/channel-value/with-full-config.tsx

@@ -1,17 +1,22 @@
+import React from 'react';
 import Trend from '@material-ui/icons/TrendingUp';
 import * as Colors from '@pxblue/colors';
 import { ChannelValue } from '@pxblue/react-components';
-import { boolean, color, number, text } from '@storybook/addon-knobs';
-import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
-import React from 'react';
 import { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';
+import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { boolean, color, number, text } from '@storybook/addon-knobs';
+import { getLeftToRightIconTransform } from '../../src/utils';
 
 export const withFullConfig = (): StoryFnReactReturnType => {
     const value = text('value', '123');
     const units = text('units', 'hz');
     const textColor = color('color', Colors.red[500]);
     const iconColor = color('icon.htmlColor', Colors.black[500]);
-    const icon = boolean('Show Icon', true) ? <Trend htmlColor={iconColor} /> : undefined;
+    const icon = boolean('Show Icon', true) ? (
+        <Trend htmlColor={iconColor} style={getLeftToRightIconTransform()} />
+    ) : (
+        undefined
+    );
     const fontSize = number('fontSize', 30);
     const prefix = boolean('prefix', false);
 

demos/storybook/stories/channel-value/with-icon.tsx

@@ -3,10 +3,15 @@ import * as Colors from '@pxblue/colors';
 import { ChannelValue } from '@pxblue/react-components';
 import { color } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { getLeftToRightIconTransform } from '../../src/utils';
 import React from 'react';
 
 export const withIcon = (): StoryFnReactReturnType => (
-    <ChannelValue value={'123'} units={'hz'} icon={<Trend htmlColor={color('icon.htmlColor', Colors.red[500])} />} />
+    <ChannelValue
+        value={'123'}
+        units={'hz'}
+        icon={<Trend htmlColor={color('icon.htmlColor', Colors.red[500])} style={getLeftToRightIconTransform()} />}
+    />
 );
 
 withIcon.story = { name: 'with icon' };

demos/storybook/stories/drawer/with-basic-config.tsx

@@ -1,4 +1,4 @@
-import { Accessibility, Menu, NotificationsActive, PermIdentity, Today, Dashboard, Toc } from '@material-ui/icons';
+import { Accessibility, Menu, NotificationsActive, Person, Today, Dashboard, LocalLibrary } from '@material-ui/icons';
 import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@pxblue/react-components';
 import { boolean, text } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
@@ -10,7 +10,7 @@ export const navGroupItems1: NavItem[] = [
     {
         title: 'Identity Management',
         itemID: '1',
-        icon: <PermIdentity />,
+        icon: <Person />,
     },
     {
         title: 'Calendar',
@@ -36,9 +36,9 @@ export const navGroupItems2: NavItem[] = [
         icon: <Dashboard />,
     },
     {
-        title: 'Timeline',
+        title: 'Manuals',
         itemID: '2-2',
-        icon: <Toc />,
+        icon: <LocalLibrary />,
     },
 ];
 

demos/storybook/stories/drawer/with-full-config.tsx

@@ -32,6 +32,7 @@ import { boolean, color, number, select, text } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
 import React from 'react';
 import { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';
+import { getLeftToRightIconTransform } from '../../src/utils';
 import { DrawerStoryContext } from './util';
 
 const EatonLogo = require('../../assets/EatonLogo.svg');
@@ -218,7 +219,7 @@ export const withFullConfig = (context: DrawerStoryContext): StoryFnReactReturnT
             onClick: (): void => {
                 context.store.set({ selected: schedule });
             },
-            icon: <AirportShuttle />,
+            icon: <AirportShuttle style={getLeftToRightIconTransform()} />,
         },
     ];
 
@@ -238,7 +239,7 @@ export const withFullConfig = (context: DrawerStoryContext): StoryFnReactReturnT
             onClick: (): void => {
                 context.store.set({ selected: agreement });
             },
-            icon: <SendIcon />,
+            icon: <SendIcon style={getLeftToRightIconTransform()} />,
         },
         {
             title: accessibility,

demos/storybook/stories/empty-state/with-basic-usage.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
 import { NotListedLocation } from '@material-ui/icons';
 import { EmptyState } from '@pxblue/react-components';
-import { text } from '@storybook/addon-knobs';
-import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
-import React from 'react';
 import { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';
+import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { getLeftToRightIconTransform } from '../../src/utils';
+import { text } from '@storybook/addon-knobs';
 
 export const withBasicUsage = (): StoryFnReactReturnType => (
     <EmptyState
-        icon={<NotListedLocation fontSize={'inherit'} style={{ marginBottom: '0' }} />}
+        icon={<NotListedLocation fontSize={'inherit'} style={getLeftToRightIconTransform()} />}
         title={text('title', 'Location Unknown')}
     />
 );

demos/storybook/stories/empty-state/with-full-config.tsx

@@ -4,6 +4,7 @@ import { EmptyState } from '@pxblue/react-components';
 import { action } from '@storybook/addon-actions';
 import { text } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { getLeftToRightIconTransform } from '../../src/utils';
 import React from 'react';
 import { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';
 
@@ -13,7 +14,7 @@ export const withFullConfig = (): StoryFnReactReturnType => {
     const actionText = text('Action Text', 'Learn More');
     return (
         <EmptyState
-            icon={<TrendingUpIcon fontSize={'inherit'} style={{ marginBottom: '0' }} />}
+            icon={<TrendingUpIcon fontSize={'inherit'} style={getLeftToRightIconTransform()} />}
             title={title}
             description={description}
             actions={

demos/storybook/stories/hero/within-a-HeroBanner.tsx

@@ -38,7 +38,12 @@ export const inBanner = (): StoryFnReactReturnType => {
         />,
     ];
     const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });
-    return <HeroBanner style={{ width: numberDisplayed * 100 }}>{heroes.slice(0, numberDisplayed)}</HeroBanner>;
+    const bannerWidth = number('width', 400, { range: true, min: 350, max: 600, step: 50 });
+    return (
+        <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[200]}`, borderRadius: 4 }}>
+            {heroes.slice(0, numberDisplayed)}
+        </HeroBanner>
+    );
 };
 
 inBanner.story = { name: 'within a Hero Banner' };

demos/storybook/stories/user-menu/with-basic-usage.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
 import { Avatar } from '@material-ui/core';
 import { Email, ExitToApp, Settings } from '@material-ui/icons';
 import { UserMenu, UserMenuItem } from '@pxblue/react-components';
 import { action } from '@storybook/addon-actions';
 import { text } from '@storybook/addon-knobs';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
-import React from 'react';
 import { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';
+import { getLeftToRightIconTransform } from '../../src/utils';
 
 const menuItems: UserMenuItem[] = [
     {
@@ -20,7 +21,7 @@ const menuItems: UserMenuItem[] = [
     },
     {
         title: 'Log Out',
-        icon: <ExitToApp />,
+        icon: <ExitToApp style={getLeftToRightIconTransform()} />,
         onClick: action("click 'Log Out'"),
     },
 ];

demos/storybook/stories/user-menu/within-a-toolbar.tsx

@@ -2,6 +2,8 @@ import { AppBar, Avatar, makeStyles, Toolbar, Typography } from '@material-ui/co
 import { Spacer, UserMenu, UserMenuItem } from '@pxblue/react-components';
 import { action } from '@storybook/addon-actions';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { getDirection } from '@pxblue/storybook-rtl-addon';
+import { getLeftToRightIconTransform } from '../../src/utils';
 import React from 'react';
 import * as Colors from '@pxblue/colors';
 import { Email, ExitToApp, Settings } from '@material-ui/icons';
@@ -16,7 +18,7 @@ export const withinToolbar = (): StoryFnReactReturnType => {
         title: {
             color: Colors.gray[600],
             fontSize: 12,
-            textAlign: 'right',
+            textAlign: getDirection() === 'rtl' ? 'left' : 'right',
         },
     });
 
@@ -37,7 +39,7 @@ export const withinToolbar = (): StoryFnReactReturnType => {
             itemID: '3',
             title: 'Log Out',
             divider: true,
-            icon: <ExitToApp />,
+            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
             onClick: action("click 'Log Out'"),
         },
         {