Merge pull request #311 from pxblue/dev

Publish 5.3.1

.circleci/config.yml

@@ -1,6 +1,7 @@
 version: 2.1
 orbs:
     codecov: codecov/[email protected]
+    gh: circleci/[email protected]
 jobs:
     build_library:
         docker:
@@ -225,6 +226,17 @@ jobs:
             command:  |
               yarn publish:package -b $CIRCLE_BRANCH
 
+    tag:
+      docker:
+        - image: circleci/node:12.9.1-browsers
+      steps:
+        - checkout
+        - gh/setup
+        - run:
+            name: Tag @pxblue/react-components
+            command: |
+              yarn tag-package -b $CIRCLE_BRANCH
+
 workflows:
     version: 2
     react_library:
@@ -253,6 +265,13 @@ workflows:
                           only:
                               - master
                               - dev
+            - tag:
+                  requires:
+                      - publish
+                  filters:
+                      branches:
+                          only:
+                             - master
             - coverage_report:
                    requires:
                         - build_library

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 5.3.1 (August 9, 2021)
+
+### Added
+
+-   Improved intellisense popup documentation with links to full component documentation.
+
+### Fixed
+
+-   Issue where `<UserMenu>` Avatar `onClick` prop overrides the open behavior ([#307](https://github.com/pxblue/react-component-library/issues/307)).
+-   `<UserMenu>` menuGroups `iconColor` prop bug ([#305](https://github.com/pxblue/react-component-library/issues/305)).
+
 ## 5.3.0 (June 30, 2021)
 
 ### Added

components/package.json

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

components/src/core/AppBar/AppBar.tsx

@@ -53,57 +53,67 @@ const useStyles = makeStyles((theme: Theme) =>
 export type AppBarProps = Omit<MuiAppBarProps, 'variant'> & {
     /**
      * Length of the collapse / expand animation (in ms)
+     *
      * Default: 300
      */
     animationDuration?: number;
 
     /**
      * Image to use as the background for the header
+     *
      * Default: none
      */
     backgroundImage?: string;
 
     /**
      * Opacity to use for the header background image
+     *
      * Default: 0.3
      */
+
     // backgroundImageOpacity?: number;
 
     /**
-     * Custom classes to add to app bar elements
+     * Custom classes for default style overrides
+     *
      * Default: none
      */
     classes?: Partial<AppBarClasses>;
 
     /**
      * Height of the App Bar when fully collapsed
-     * Default: 64 desktop, 56 mobile
+     *
+     * Default: desktop: 64, mobile: 56
      */
     collapsedHeight?: number | string;
 
     /**
      * Height of the App Bar when fully expanded
-     * Default: 200
+     *
+     *  Default: 200
      */
     expandedHeight?: number | string;
 
     /**
-     * Current variant of the app bar:
+     * Behavior of the app bar:
      * - 'expanded' locks the app bar at the expandedHeight,
      * - 'collapsed' locks it at the collapsedHeight,
      * - 'snap' resizes the toolbar after the window passes a scrollThreshold.
+     *
      * Default: snap
      */
     variant?: 'expanded' | 'collapsed' | 'snap';
 
     /**
      * How far to scroll before collapsing the app bar
+     *
      * Default: 136
      */
     scrollThreshold?: number;
 
     /**
-     * A ref to the scrollable container that controls the app bar height
+     * An element ID for the scrollable container that controls the app bar height
+     *
      * Default: window
      */
     scrollContainerId?: string;
@@ -296,6 +306,12 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
         </>
     );
 };
+
+/**
+ * [Appbar](https://pxblue-components.github.io/react/?path=/info/components-app-bar--get-read-me-story) component
+ *
+ * An extension of the default AppBar from Material UI that can be resized / collapsed as the page is scrolled.
+ */
 export const AppBar = React.forwardRef(AppBarRender);
 AppBar.displayName = 'AppBar';
 

components/src/core/ChannelValue/ChannelValue.tsx

@@ -11,12 +11,28 @@ export type ChannelValueClasses = {
     value?: string;
 };
 export type ChannelValueProps = Omit<HTMLAttributes<HTMLSpanElement>, 'prefix'> & {
+    /** Custom classes for default style overrides */
     classes?: ChannelValueClasses;
+    /** The color used for the text elements
+     *
+     * Default: 'inherit'
+     */
     color?: string;
+    /** The size to use for the text elements
+     *
+     *  Default: 'inherit'
+     */
     fontSize?: number | string;
+    /** A component to render for the icon */
     icon?: JSX.Element;
+    /** Whether to show the units before the value (e.g., for currency)
+     *
+     *  Default: false
+     */
     prefix?: boolean;
+    /** Text to display for the units (light text) */
     units?: string;
+    /** Text to display for the value (bold text) */
     value: number | string;
 };
 
@@ -110,6 +126,12 @@ const ChannelValueRender: React.ForwardRefRenderFunction<unknown, ChannelValuePr
         </span>
     );
 };
+/**
+ * [ChannelValue](https://pxblue-components.github.io/react/?path=/info/components-channel-value--get-read-me-story) component
+ *
+ * Used to show a stylized value and its units.
+ * You may also include an icon.
+ */
 export const ChannelValue = React.forwardRef(ChannelValueRender);
 
 ChannelValue.displayName = 'ChannelValue';

components/src/core/Drawer/Drawer.tsx

@@ -71,37 +71,62 @@ type DrawerClasses = {
 export type DrawerProps = Omit<MUIDrawerProps, 'translate' | 'variant'> &
     SharedStyleProps &
     NavItemSharedStyleProps & {
-        // the id for the currently active item
+        /** The itemID for the 'active' item */
         activeItem?: string;
 
-        // custom classes for default style overrides
+        /** Custom classes for default style overrides */
         classes?: DrawerClasses;
 
-        // Sets a smaller width when the drawer is using the rail variant
+        /**  Enables a condensed view for the `rail` variant which removes NavItem labels and shows tooltips instead
+         *
+         * Default: false
+         */
         condensed?: boolean;
 
-        // Describes if this Drawer is used outside of a DrawerLayout
+        /** Describes if this Drawer is used outside of a DrawerLayout
+         *
+         * Default: false
+         */
         noLayout?: boolean;
 
-        // Function called whenever a navigation item or rail item is clicked
+        /** A callback function to execute whenever an item is clicked */
         onItemSelect?: (id: string) => void;
 
-        // Controls the open/closed state of the drawer
+        /** Controls the open/closed state of the drawer */
         open: boolean;
 
-        // Enables Drawer to automatically open on hover for persistent variants.
+        /** Automatically open the drawer on hover when closed (persistent variant only)
+         *
+         * Default: true
+         */
         openOnHover?: boolean;
 
-        // Delay (ms) to use for open on hover.
+        /** Delay (ms) before triggering open on hover (persistent variant only)
+         *
+         * Default: 500
+         */
         openOnHoverDelay?: number;
 
-        // Toggles the drawer side border instead of a drop shadow
+        /** Whether to use a side border for the drawer instead of a shadow
+         *
+         * Default: false
+         */
         sideBorder?: boolean;
-
-        // Drawer variant type
+        /**
+         * Behavior of the drawer:
+         * - 'permanent': Always open, even when `open` is set to false.
+         * - 'persistent': When `open` is set to false, the `<Drawer>` collapses itself as a navigation rail, and hover will make it expand temporarily; when `open` is set to true, it behaves like a permanent `<Drawer>`.
+         * - 'temporary': When `open` is set to false, the `<Drawer>` is hidden; when `open` is set to true, it slides in.
+         * - 'rail': An always collapsed version of the `<Drawer>` that only displays an icons and titles.
+         *
+         * Default: 'persistent
+         */
         variant?: 'persistent' | 'permanent' | 'temporary' | 'rail';
 
-        // Sets the width of the drawer (in px) when open
+        /** Sets the width of the drawer when open
+         *
+         * Default: 22.5rem (360px)
+         */
         width?: number | string;
     };
 export type DrawerComponentProps = DrawerProps; // alias
@@ -328,7 +353,13 @@ const DrawerRenderer: React.ForwardRefRenderFunction<unknown, DrawerProps> = (pr
         </MUIDrawer>
     );
 };
-
+/**
+ * [Drawer](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) component
+ *
+ * The `<Drawer>` component is a wrapper around the [Material UI Drawer](https://material-ui.com/api/drawer/) that adds specific PX Blue functionality and styling. It is used to organize content (typically navigation links) in a collapsible side panel.
+ *
+ * The PX Blue Drawer includes helper components for `<DrawerHeader>`, `<DrawerSubheader>`, `<DrawerBody>`, `<DrawerNavGroup>`, `<DrawerNavItem>`, `<DrawerRailItem>`, `<DrawerFooter>`, and `<DrawerLayout>` to help organize the content.
+ */
 export const Drawer = React.forwardRef(DrawerRenderer);
 Drawer.displayName = 'PXBlueDrawer';
 // @ts-ignore

components/src/core/Drawer/DrawerBody.tsx

@@ -13,6 +13,7 @@ type DrawerBodyClasses = {
 export type DrawerBodyProps = HTMLAttributes<HTMLDivElement> &
     SharedStyleProps &
     NavItemSharedStyleProps & {
+        /** Custom classes for default style overrides */
         classes?: DrawerBodyClasses;
     };
 
@@ -104,6 +105,11 @@ const DrawerBodyRender: React.ForwardRefRenderFunction<unknown, DrawerBodyProps>
     );
 };
 
+/**
+ * [DrawerBody](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) component
+ *
+ * The `<DrawerBody>` is a wrapper for the main content of the Drawer. The typical use case is to display `<DrawerNavGroup>` elements, but custom elements (e.g., for spacing) are accepted as well.
+ */
 export const DrawerBody = React.forwardRef(DrawerBodyRender);
 DrawerBody.displayName = 'DrawerBody';
 // @ts-ignore

components/src/core/Drawer/DrawerFooter.tsx

@@ -5,8 +5,17 @@ import { useDrawerContext } from './DrawerContext';
 import clsx from 'clsx';
 
 export type DrawerFooterProps = HTMLAttributes<HTMLDivElement> & {
+    /** The color used for the background  */
     backgroundColor?: string;
+    /** Optional divider which appears above footer
+     *
+     * Default: true
+     */
     divider?: boolean;
+    /** Hide footer contents when drawer is closed
+     *
+     * Default: true
+     */
     hideContentOnCollapse?: boolean;
 };
 
@@ -50,6 +59,11 @@ const DrawerFooterRender: React.ForwardRefRenderFunction<unknown, DrawerFooterPr
     );
 };
 
+/**
+ * [DrawerFooter](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) component
+ *
+ * The `<DrawerFooter>` is an optional section that renders at the bottom of the `<Drawer>`. It can be used to add any custom content (as children).
+ */
 export const DrawerFooter = React.forwardRef(DrawerFooterRender);
 DrawerFooter.displayName = 'DrawerFooter';
 DrawerFooter.propTypes = {

components/src/core/Drawer/DrawerHeader.tsx

@@ -26,16 +26,36 @@ type DrawerHeaderClasses = {
 };
 
 export type DrawerHeaderProps = ToolbarProps & {
+    /** The color used for the background */
     backgroundColor?: string;
+    /** An image to display in the header */
     backgroundImage?: string;
+    /** The opacity of the background image
+     *
+     *  Default: 0.3
+     */
     backgroundOpacity?: number;
+    /** Custom classes for default style overrides */
     classes?: DrawerHeaderClasses;
+    /** Optional divider which appears beneath header */
     divider?: boolean;
+    /** The color of the text elements
+     *
+     *  Default: false
+     */
     fontColor?: string;
+    /** A component to render for the icon  */
     icon?: ReactNode;
+    /** A function to execute when the icon is clicked
+     *
+     * Default: `() => {}`
+     */
     onIconClick?: () => void;
+    /** The text to show on the second line */
     subtitle?: string;
+    /** The text to show on the first line */
     title?: string;
+    /** Custom content for header title area */
     titleContent?: ReactNode;
 };
 
@@ -213,6 +233,11 @@ const DrawerHeaderRender: React.ForwardRefRenderFunction<unknown, DrawerHeaderPr
         </>
     );
 };
+/**
+ * [DrawerHeader](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) component
+ *
+ * The `<DrawerHeader>` contains the content at the top of the `<Drawer>`. By default, it renders multiple lines of text in the PX Blue style. If you supply a `titleContent`, you can render your own custom content in the title area.
+ */
 export const DrawerHeader = React.forwardRef(DrawerHeaderRender);
 
 DrawerHeader.displayName = 'DrawerHeader';