playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -18,7 +18,7 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode;
   className?: string;
   collapsible?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   dark?: boolean;
   fontSize?: "normal" | "small";
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick,
+    onClick = () => {},
     target = "_self",
     text = "",
     collapsibleTrail,
@@ -205,49 +205,46 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-              className={collapsibleClasses}
-              collapsed={collapsed}
-              icon={iconRight && iconRight}
-              iconSize="xs"
-              id={id}
-              onClick={onClick}
-              onIconClick={onIconRightClick}
+            className={collapsibleClasses}
+            icon={iconRight && iconRight}
+            iconSize="xs"
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
           >
             <Collapsible.Main
-                className={globalProps({ ...finalItemSpacing })}
-                dark={dark}
-            >
+            className={globalProps({ ...finalItemSpacing })}
+            dark={dark}>
               <Tag
-                  {...ariaProps}
-                  {...dataProps}
-                  {...htmlProps}
-                  className={classes}
-                  href={link}
-                  id={id}
-                  target={target}
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                href={link}
+                target={target}
               >
                 {imageUrl && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={imageUrl}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={imageUrl}
+                    onClick={(e) => handleIconClick(e)}
                   >
-                    <Image className="pb_nav_img_wrapper"
-                        url={imageUrl}
-                    />
+                    <Image className="pb_nav_img_wrapper" url={imageUrl} />
                   </div>
                 )}
 
                 {iconLeft && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={iconLeft}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={iconLeft}
+                    onClick={(e) => handleIconClick(e)}
                   >
                     <Icon
-                        className="pb_nav_list_item_icon_left_collapsible"
-                        fixedWidth
-                        icon={iconLeft}
+                      className="pb_nav_list_item_icon_left_collapsible"
+                      fixedWidth
+                      icon={iconLeft}
                     />
                   </div>
                 )}
@@ -261,33 +258,27 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         </>
       ) : (
         <Tag
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            href={link}
-            id={id}
-            onClick={onClick}
-            target={target}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          href={link}
+          onClick={onClick}
+          target={target}
         >
           {imageUrl && (
-            <div className="pb_nav_list_item_icon_section"
-                key={imageUrl}
-            >
-              <Image className="pb_nav_img_wrapper"
-                  url={imageUrl}
-              />
+            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
+              <Image className="pb_nav_img_wrapper" url={imageUrl} />
             </div>
           )}
 
           {iconLeft && (
-            <div className="pb_nav_list_item_icon_section"
-                key={iconLeft}
-            >
+            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
               <Icon
-                  className="pb_nav_list_item_icon_left"
-                  fixedWidth
-                  icon={iconLeft}
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
               />
             </div>
           )}
@@ -296,13 +287,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
           {iconRight && (
             <div
-                className="pb_nav_list_item_icon_section"
-                key={iconRight as string}
+              className="pb_nav_list_item_icon_section"
+              key={iconRight as string}
             >
               <Icon
-                  className="pb_nav_list_item_icon_right"
-                  fixedWidth
-                  icon={iconRight as string}
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight as string}
               />
             </div>
           )}

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -12,12 +12,12 @@ type NavProps = {
   borderless?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string | string[],
-  data?: Record<string, unknown>,
+  data?: object,
   dark?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  onClick?: () => void,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
   itemSpacing?: SpacingObject
 } & GlobalProps
 
-const Nav = (props: NavProps): React.ReactElement => {
+const Nav = (props: NavProps) => {
   const {
     aria = {},
     borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps): React.ReactElement => {
     htmlOptions = {},
     id,
     link = '#',
-    onClick,
+    onClick = () => { },
     orientation = 'vertical',
     title = '',
     variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
 
   return (
     <nav
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={cardCss}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={cardCss}
+      id={id}
     >
       {title &&
         <div className="pb_nav_list_title">
           <a
-              className="pb_nav_list_item_link_text"
-              href={link}
-              onClick={onClick}
+            className="pb_nav_list_item_link_text"
+            href={link}
+            onClick={onClick}
           >
             <Caption
-                dark={dark}
-                size="md"
-                text={`${title}`}
+              dark={dark}
+              size="md"
+              text={`${title}`}
             />
           </a>
         </div>

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,11 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-1x fa-angle-down" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
 })
 
 test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-1x fa-users-class" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -148,7 +148,7 @@
     .placeholder {
       position: absolute;
       margin-right: 2px;
-      margin-left: 10px;
+      margin-left: 2px;
       top: 50%;
       transform: translateY(-50%);
       box-sizing: border-box;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -73,10 +73,8 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ ...props }) => (
-      <components.SingleValue {...props}>
-        <span>{props.data.name}</span>
-      </components.SingleValue>
+    SingleValue: ({ data }: any) => (
+      <span>{data.name}</span>
     )
   }