playbook_ui 13.15.0.pre.alpha.PLAY11311893 → 13.15.0.pre.alpha.play10841940

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
-          {...userObject}
-          className="pb_multiple_users_stacked_item"
-          dark={dark}
-          key={index}
-          size="xs"
+            {...userObject}
+            className="pb_multiple_users_stacked_item"
+            dark={dark}
+            key={index}
+            size="xs"
         />
       )
     })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
-            {...userObject}
-            className="pb_multiple_users_stacked_item second_item"
-            dark={dark}
-            key={index}
-            size="xs"
+              {...userObject}
+              className="pb_multiple_users_stacked_item second_item"
+              dark={dark}
+              key={index}
+              size="xs"
           />
         )
       })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     if (moreThanTwo === true) {
       return (
         <Badge
-          className="pb_multiple_users_stacked_item second_item"
-          dark={dark}
-          rounded
-          text={`+${users.length - displayCount()}`}
-          variant="primary"
+            className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
+            rounded
+            text={`+${users.length - displayCount()}`}
+            variant="primary"
         />
       )
     }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {firstUser()}
       {secondUser()}

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?: object;
+  data?: Record<string, unknown>;
   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,46 +205,49 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-            className={collapsibleClasses}
-            icon={iconRight && iconRight}
-            iconSize="xs"
-            id={id}
-            collapsed={collapsed}
-            onIconClick={onIconRightClick}
-            onClick={onClick}
+              className={collapsibleClasses}
+              collapsed={collapsed}
+              icon={iconRight && iconRight}
+              iconSize="xs"
+              id={id}
+              onClick={onClick}
+              onIconClick={onIconRightClick}
           >
             <Collapsible.Main
-            className={globalProps({ ...finalItemSpacing })}
-            dark={dark}>
+                className={globalProps({ ...finalItemSpacing })}
+                dark={dark}
+            >
               <Tag
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                href={link}
-                target={target}
+                  {...ariaProps}
+                  {...dataProps}
+                  {...htmlProps}
+                  className={classes}
+                  href={link}
+                  id={id}
+                  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>
                 )}
@@ -258,27 +261,33 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         </>
       ) : (
         <Tag
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          href={link}
-          onClick={onClick}
-          target={target}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            href={link}
+            id={id}
+            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>
           )}
@@ -287,13 +296,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?: object,
+  data?: Record<string, unknown>,
   dark?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
   itemSpacing?: SpacingObject
 } & GlobalProps
 
-const Nav = (props: NavProps) => {
+const Nav = (props: NavProps): React.ReactElement => {
   const {
     aria = {},
     borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
     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_select/_select.scss

@@ -102,29 +102,20 @@
     pointer-events: none;
   }
   &.inline {
-    @mixin active_arrow_style {
-      svg {
-        color: $primary !important;
-        font-size: 16px;
-      }
-    }
     &:not(:hover) {
       svg {
         display: none;
       }
     }
-    &.show_arrow:not(:hover) {
-      svg {
-        display: block;
-      }
-      @include active_arrow_style();
-    }
     &:hover {
-      @include active_arrow_style();
       select {
         color: $primary !important;
         background: rgba(0,130,255,0.1);
       }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
     }
     select {
       box-shadow: none;

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -36,7 +36,6 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
-  showArrow?: boolean,
   value?: string,
 } & GlobalProps
 
@@ -64,10 +63,9 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => undefined,
+  onChange = () => {},
   options = [],
   required = false,
-  showArrow = false,
   value,
   ...props
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -79,16 +77,15 @@ const Select = ({
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
   const classes = classnames(
-    buildCss("pb_select"),
+    buildCss('pb_select'),
     globalProps({
       ...props,
-      marginBottom: props.marginBottom || props.margin || "sm",
+      marginBottom: props.marginBottom || props.margin || 'sm',
     }),
     className,
     inlineClass,
-    { show_arrow: showArrow },
     compactClass
-  );
+  )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -10,7 +10,6 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
-  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -27,7 +26,6 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
-  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
 

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -7,6 +7,5 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
-export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'

data/app/pb_kits/playbook/pb_select/select.rb

@@ -19,11 +19,10 @@ module Playbook
       prop :name
       prop :onchange
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
-      prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classnames
-        classname + inline_class + compact_class + show_arrow_class
+        classname + inline_class + compact_class
       end
 
       def all_attributes
@@ -50,10 +49,6 @@ module Playbook
         compact ? "compact" : ""
       end
 
-      def show_arrow_class
-        show_arrow ? "show_arrow" : ""
-      end
-
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end