playbook_ui 15.5.0.pre.alpha.play2663multiuserkitaddtooltipsupport12718 → 15.5.0.pre.alpha.play250212696

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ed59e7452b01bd5e377683d7ca28494a0e6a20a5d9614e70164ee5c36a9ad7f
-  data.tar.gz: ca7cd2df26da0a2639b053f1f44a5f2dfb5162575b96deef2f9c767d601dc874
+  metadata.gz: 0f25d8e230fb6f3cf92eac4b1e458b83579eba7a8f201a70f84c54fb97698b6b
+  data.tar.gz: f63d76ad13dada00d5d24667c202d4b8de8b29559fe5b6c0fbcf28eb8e3205f8
 SHA512:
-  metadata.gz: 7308176225b39e0185e1128d0a444a2a71e4cb495acb2bebb7819bcbe59c2941885ca0ea45bb4bc353af45f2bf822b900b3de324f7c0bb34900d5a7b21c9c284
-  data.tar.gz: ac3c61e7da0a69be6db96c22bae3a8894f74d2cc12515d496dc2ca473ff1dcae5bf1ed254b444f95d14a923f04b48541af5d75ced0e6ddf584a0a6f59e3dcb05
+  metadata.gz: 3f81a0dbf26bbbe3705c641959e175d4d4807690c16c672200e0a75a9fda6929eefe20ed29305f863c2229c6b5427a61327372364c4adb4f043ede86ac58cfb0
+  data.tar.gz: 9e0869caebd6545288ebe34e1df3d8c3f51faf21c915237aae222029abe6274c934ba2453b46c59f476ea3b38f58e0be319817b5f3d017fef7b915232a5fc5aa

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -36,16 +36,6 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     height: $pb_multiple_users_size_xxs;
   }
 
-
-  .user_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-  }
-
-  .user_count_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-    position: relative;
-  }
-
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -5,19 +5,17 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 
 type MultipleUsersProps = {
   aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
-  withTooltip?: boolean,
   users: Array<{ [key: string]: string }>,
 }
 
@@ -32,7 +30,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     maxDisplayedUsers = 4,
     reverse = false,
     size = 'xs',
-    withTooltip = false,
     users,
   } = props
 
@@ -65,70 +62,22 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {withTooltip ?
-        <>
-          {usersToDisplay.map((avatarData, index) => (
-            <Tooltip
-                key={"user_tooltip_" + index}
-                placement='top'
-                text={avatarData.tooltip ? avatarData.tooltip : ''}
-                zIndex={10}
-            >
-              <Avatar
-                  {...avatarData}
-                  className={"pb_multiple_users_item" + (withTooltip ? " user_tooltip" : "")}
-                  dark={dark}
-                  imageAlt={avatarData.name}
-                  key={index}
-                  size={size}
-              />
-            </Tooltip>
-          ))}
+      {usersToDisplay.map((avatarData, index) => (
+        <Avatar
+            {...avatarData}
+            className="pb_multiple_users_item"
+            dark={dark}
+            imageAlt={avatarData.name}
+            key={index}
+            size={size}
+        />
+      ))}
 
-          {users.length > maxDisplayedUsers &&
-            <Tooltip
-                placement='top'
-                text={
-                  <div>
-                    {
-                      usersToDisplay.length < users.length ? 
-                        users.slice(displayCount).map((u, i) => (
-                          <div key={i}>{u.tooltip}</div>
-                        ))
-                      : 
-                        ''
-                    }
-                  </div>
-                }
-                zIndex={10}
-            >
-              <div className={itemClasses + (withTooltip ? " user_count_tooltip" : "")}>
-                {`+${users.length - displayCount}`}
-              </div>
-            </Tooltip>
-          }
-        </>
-        :
-        <>
-          {usersToDisplay.map((avatarData, index) => (
-            <Avatar
-                {...avatarData}
-                className="pb_multiple_users_item"
-                dark={dark}
-                imageAlt={avatarData.name}
-                key={index}
-                size={size}
-            />
-          ))}
-
-          {users.length > maxDisplayedUsers &&
-            <div className={itemClasses}>
-              {`+${users.length - 3}`}
-            </div>
-          }
-        </>
+      { users.length > maxDisplayedUsers && 
+        <div className={itemClasses}>
+          {`+${users.length - 3}`}
+        </div>
       }
-
     </div>
   )
 }

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

@@ -10,7 +10,6 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-  - multiple_users_with_tooltip: With Tooltip
 
   swift:
   - multiple_users_default_swift: Default

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

@@ -1,4 +1,3 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
 export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
-export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js

@@ -49,29 +49,4 @@ test('should render aria-label', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
-})
-
-test('should render withTooltip prop', () => {
-  render(
-      <MultipleUsers
-          data={{ testid: testId }}
-          users={[
-            {
-              name: 'Patrick Welch',
-              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-              tooltip: "Patrick Welch - Online"
-            },
-            {
-              name: 'Lucille Sanchez',
-              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-              tooltip: "Lucille Sanchez - Offline"
-            },
-          ]}
-          withTooltip
-      />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const childWithTooltip = kit.querySelector('.pb_tooltip_kit')
-  expect(childWithTooltip).not.toBeNull()
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -276,3 +276,18 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
+test('input display none shows number of selected items', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-test')
+  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+})

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

@@ -43,6 +43,7 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -89,6 +90,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
+  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -238,6 +240,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
+    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -19,7 +19,12 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
+
+  // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
+  if (inputDisplay === 'none') {
+    return null
+  }
 
   const formPillProps = {
     marginRight: 'xs',

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,15 +1,42 @@
 import React from 'react'
 import { components } from 'react-select'
+import Body from '../../pb_body/_body'
 
 type ValueContainerProps = {
-  children: React.ReactNode,
+  children: React.ReactNode | React.ReactNode[],
+  selectProps?: Record<string, unknown>,
+  hasValue?: boolean,
 }
 
-const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
-  <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
-  />
-)
+const ValueContainer = (props: ValueContainerProps | any): React.ReactElement => {
+  const { children, selectProps, hasValue } = props
+  const inputDisplay = (selectProps as any)?.inputDisplay
+  const value = (selectProps as any)?.value
+
+  // When inputDisplay is "none" and there are selected values, show count text (this is for multi-select only)
+  if (inputDisplay === 'none' && hasValue && value) {
+    const selectedCount = Array.isArray(value) ? value.length : 0
+    
+    return (
+      <components.ValueContainer 
+          className="text_input_value_container"
+          {...props}
+      >
+        <Body
+            className="pb_typeahead_selection_count"
+            text={`${selectedCount} item${selectedCount !== 1 ? 's' : ''} selected`}
+        />
+        {children}
+      </components.ValueContainer>
+    )
+  }
+
+  return (
+    <components.ValueContainer 
+        className="text_input_value_container"
+        {...props}
+    />
+  )
+}
 
 export default ValueContainer

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -0,0 +1,30 @@
+<% 
+options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+] 
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-none",
+    label: "With Input Display None",
+    options: options,
+    name: :foo,
+    input_display: "none",
+    })
+%>
+<br/>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-pills",
+    label: "With Input Display Pills (Default)",
+    options: options,
+    name: :foo,
+    pills: true,
+    })
+%>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+]
+
+const TypeaheadInputDisplay = (props) => {
+  return (
+    <>
+      <Typeahead
+          inputDisplay="none"
+          isMulti
+          label="With Input Display None"
+          options={options}
+          {...props}
+      />
+      <br/>
+      <Typeahead
+          isMulti
+          label="With Input Display Pills (Default)"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -0,0 +1,3 @@
+Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
+
+**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

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

@@ -5,6 +5,7 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -25,6 +25,10 @@ module Playbook
       prop :is_multi, type: Playbook::Props::Boolean,
                       default: true
 
+      prop :input_display, type: Playbook::Props::Enum,
+                           values: %w[none pills],
+                           default: "pills"
+
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -78,7 +82,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -91,6 +95,7 @@ module Playbook
           id: id,
           inline: inline,
           isMulti: is_multi,
+          inputDisplay: input_display,
           label: label,
           marginBottom: margin_bottom,
           multiKit: multi_kit,