Merge pull request #268 from pxblue/dev

[#1] Publish @pxblue/[email protected]

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 5.1.0
+
+### Changed
+
+-   Some default colors in `<InfoListItem>`, `<Drawer>` and `<ScoreCard>` headers to work with @pxblue/react-themes version 6+.
+-   Some default styles on `<ScoreCard>`, `<UserMenu>`, and `<EmptyState>` text elements.
+-   Component sizing updated to use rems to better respond to system font size changes.
+
+### Added
+
+-   `openOnHoverDelay` to `<Drawer>` to alter open-on-hover delay for closed persistent drawers. 
+-   peerDependency support for using with React 17
+
 ## 5.0.0
 
 ### Changed
@@ -11,6 +24,7 @@
 -   Some of the class names for style overrides have changed
 
 ### Added
+
 -   Additional configuration properties for `<Drawer>`:
     -   `sideBorder` gives the `<Drawer>` a slight border instead of a drop shadow.
     -   `disableActiveItemParentStyle` disables the bold text style for active item's parent elements.
@@ -59,10 +73,12 @@
 
 ## v4.0.2
 
-### Added 
+### Added
+
 -   Adds `info` prop to `<InfoListItem>` to support a third line of text.
 
 ### Changed
+
 -   Updates several prop types to `ReactNode` to support wider range of input values.
 
 ## v4.0.1
@@ -71,10 +87,12 @@
 
 ## v4.0.0
 
-### Added  
+### Added
+
 -   Style-related properties are now overridable by the `classes` prop in each component.
 
 ### Changed
+
 -   Supplemental properties are now spread to the root component for each PX Blue component.
 -   Changed component font colors to address potential accessibility issues.
 
@@ -85,16 +103,19 @@
 ## v3.0.3
 
 ### Fixed
+
 -   Fixes IE 11 issue where persistent `<Drawer>` will not close.
 -   Fixes some spacing issues when using the `<DrawerLayout>`.
 
 ## v3.0.0
 
-### Added 
+### Added
+
 -   Adds support for nested items in the `<Drawer>` component.
 -   Additional styling props added to `<Drawer>`.
 
-### Changed 
+### Changed
+
 **Breaking Changes:**
 
 -   A few props got renamed to avoid further ambiguities:
@@ -137,18 +158,21 @@
 
 ## v2.1.0
 
-### Added 
+### Added
+
 -   Adds `<InfoListTag>` Component
     -   Displays additional information inside an InfoListItem.
 -   Adds `<UserMenu>` Component
     -   Avatar which opens a Menu when clicked.
-
-### Fixed 
+
+### Fixed
+
 -   Misc bug fixes.
 
 ## v2.0.0
 
 ### Added
+
 -   Adds new components for:
     -   `<Drawer>`
     -   `<DrawerHeader>`
@@ -159,6 +183,7 @@
     -   `<DrawerLayout>`
 
 ### Changed
+
 -   Library converted to TypeScript to provide strong typings for TS projects.
 -   **Breaking Change:** Simpler import syntax - _default_ imports will no longer work.
 
@@ -172,12 +197,14 @@
 
 ## v1.1.0
 
-### Added 
+### Added
+
 Adds a new component for `<EmptyState>`.
 
 ## v1.0.0
 
-### Fixed 
+### Fixed
+
 Fixes a bug in icon size for inline `<ChannelValue>` components.
 
 ## v0.0.1

PUBLISHING.md

@@ -0,0 +1,13 @@
+# Publishing Instructions
+
+To update the version number, edit the version in `components/package.json`. 
+
+To publish a new package through NPM, run the following commands from the root folder: 
+
+```
+yarn build 
+cd dist
+npm publish --tag <alpha | beta>
+```
+
+> The above command should only be run for `alpha` or `beta` packages.  This repo's CircleCI will automatically publish latest packages from the master branch. 

README.md

@@ -33,6 +33,10 @@ The library can be built by running the following command. The resulting output
 yarn build
 ```
 
+## Using with @pxblue/react-themes
+
+We recommend using this library in conjunction with [@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes). If you are using version 6.0.0+ of the PX Blue themes, you must upgrade to at least version 5.1.0 of @pxblue/react-components or you may see some unintended default styles on some components.
+
 ## Running the demo projects
 
 This repository comes with two demo projects found within the `/demos` folder.

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pxblue/react-components",
-    "version": "5.0.0",
+    "version": "5.1.0",
     "description": "React components for PX Blue applications",
     "scripts": {
         "test": "jest src",
@@ -21,32 +21,33 @@
         "@material-ui/icons": "^4.0.0",
         "@pxblue/eslint-config": "^2.0.1",
         "@pxblue/prettier-config": "^1.0.2",
-        "@pxblue/react-themes": "^6.0.0-beta.0",
+        "@pxblue/react-themes": "^6.0.0",
         "@types/color": "^3.0.1",
         "@types/enzyme": "^3.10.4",
         "@types/enzyme-adapter-react-16": "^1.0.5",
-        "@types/jest": "^25.1.1",
-        "@types/react-dom": "^16.9.4",
-        "@typescript-eslint/eslint-plugin": "^3.6.0",
-        "@typescript-eslint/parser": "^3.6.0",
+        "@types/jest": "^26.0.22",
+        "@types/react-dom": "^17.0.3",
+        "@typescript-eslint/eslint-plugin": "^4.19.0",
+        "@typescript-eslint/parser": "^4.19.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
         "clsx": "^1.1.0",
         "enzyme": "^3.5.0",
         "enzyme-adapter-react-16": "^1.8.0",
         "eslint": "^7.4.0",
-        "eslint-config-prettier": "^6.9.0",
+        "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-react": "^7.20.3",
-        "jest": "^24.0.0",
-        "prettier": "^1.19.1",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
-        "ts-jest": "^24.3.0",
-        "typescript": "^3.7.4"
+        "jest": "^26.0.0",
+        "prettier": "^2.2.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "ts-jest": "^26.0.0",
+        "typescript": "^4.2.3"
     },
     "peerDependencies": {
         "@material-ui/core": "^4.11.0",
         "@pxblue/colors": "^3.0.0",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6"
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
     },
     "repository": {
         "type": "git",

components/src/core/ChannelValue/ChannelValue.test.tsx

@@ -4,7 +4,8 @@ import { findByTestId } from '../test-utils';
 import { Mount, Shallow } from '../types';
 import { ChannelValue } from './ChannelValue';
 import * as Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+// import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Menu from '@material-ui/icons/Menu';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 

components/src/core/Drawer/Drawer.test.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Mount, Shallow } from '../types';
 import * as Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+// import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 import { findByTestId } from '../test-utils';
 import { Avatar, Typography } from '@material-ui/core';

components/src/core/Drawer/Drawer.tsx

@@ -15,8 +15,8 @@ import { NavItemSharedStyleProps, NavItemSharedStylePropTypes, SharedStyleProps,
 import { findChildByType, mergeStyleProp } from './utilities';
 import clsx from 'clsx';
 
-export const RAIL_WIDTH = 72;
-export const RAIL_WIDTH_CONDENSED = 56;
+export const RAIL_WIDTH = 'calc(3.5rem + 16px)'; // 72;
+export const RAIL_WIDTH_CONDENSED = 'calc(1.5rem + 32px)'; //56;
 
 const useStyles = makeStyles<Theme, DrawerProps>((theme: Theme) =>
     createStyles({
@@ -92,14 +92,17 @@ export type DrawerProps = Omit<MUIDrawerProps, 'translate' | 'variant'> &
         // Enables Drawer to automatically open on hover for persistent variants.
         openOnHover?: boolean;
 
+        // Delay (ms) to use for open on hover.
+        openOnHoverDelay?: number;
+
         // Toggles the drawer side border instead of a drop shadow
         sideBorder?: boolean;
 
         // Drawer variant type
         variant?: 'persistent' | 'permanent' | 'temporary' | 'rail';
 
         // Sets the width of the drawer (in px) when open
-        width?: number;
+        width?: number | string;
     };
 export type DrawerComponentProps = DrawerProps; // alias
 
@@ -134,6 +137,7 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
         noLayout = false,
         open,
         openOnHover,
+        openOnHoverDelay,
         onItemSelect,
         sideBorder = false,
         variant: variantProp,
@@ -239,7 +243,7 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
                     onMouseEnter={
                         openOnHover
                             ? (): void => {
-                                  hoverDelay = setTimeout(() => setHover(true), 500);
+                                  hoverDelay = setTimeout(() => setHover(true), openOnHoverDelay);
                               }
                             : undefined
                     }
@@ -258,22 +262,22 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
                 </div>
             </>
         ),
-        [setHover, hoverDelay, getSubHeader, getBody, getFooter]
+        [setHover, openOnHover, openOnHoverDelay, getSubHeader, getBody, getFooter]
     );
 
     /* Default Drawer Sizes */
-    const EXPANDED_DRAWER_WIDTH_DEFAULT = theme.spacing(45);
-    const COLLAPSED_DRAWER_WIDTH_DEFAULT = theme.spacing(7);
+    const EXPANDED_DRAWER_WIDTH_DEFAULT = '22.5rem'; // theme.spacing(45);
+    const COLLAPSED_DRAWER_WIDTH_DEFAULT = 'calc(1.5rem + 32px)'; //theme.spacing(7);
 
     // Determine the visible width of the drawer
-    const getDrawerWidth = useCallback((): number => {
+    const getDrawerWidth = useCallback((): number | string => {
         if (isRail) return condensed ? RAIL_WIDTH_CONDENSED : RAIL_WIDTH;
         if (isDrawerOpen()) return width || EXPANDED_DRAWER_WIDTH_DEFAULT;
         return COLLAPSED_DRAWER_WIDTH_DEFAULT;
     }, [isRail, condensed, theme, isDrawerOpen, width]);
 
     // Get the width of the content inside the drawer - if the drawer is collapsed, content maintains its size in order to clip
-    const getContentWidth = useCallback((): number => {
+    const getContentWidth = useCallback((): number | string => {
         if (isRail) return condensed ? RAIL_WIDTH_CONDENSED : RAIL_WIDTH;
         return width || EXPANDED_DRAWER_WIDTH_DEFAULT;
     }, [isRail, condensed, width, theme]);
@@ -344,14 +348,16 @@ Drawer.propTypes = {
     onItemSelect: PropTypes.func,
     open: PropTypes.bool.isRequired,
     openOnHover: PropTypes.bool,
+    openOnHoverDelay: PropTypes.number,
     sideBorder: PropTypes.bool,
     variant: PropTypes.oneOf(['persistent', 'permanent', 'temporary', 'rail']),
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 Drawer.defaultProps = {
     classes: {},
     openOnHover: true,
     sideBorder: false,
     variant: 'persistent',
     condensed: false,
+    openOnHoverDelay: 500,
 };

components/src/core/Drawer/DrawerContext.ts

@@ -7,7 +7,7 @@ type DrawerContextType = {
     condensed?: boolean;
     activeItem?: string;
     onItemSelect?: (id: string) => void;
-    width?: number;
+    width?: number | string;
 };
 
 export const DrawerContext = createContext<DrawerContextType>({