playbook_ui 16.1.0.pre.rc.3 → 16.2.0.pre.rc.0

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

@@ -290,4 +290,27 @@ test('input display none shows number of selected items', () => {
   const kit = screen.getByTestId('input-display-none-test')
   const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
   expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
-})
+})
+
+test('typeahead with pills that use name instead of label', () => {
+  const customOptions = [
+    { name: 'Nihar', value: '1' },
+    { name: 'kylehgousel', value: '2' },
+  ]
+
+  render(
+    <Typeahead
+        data={{ testid: 'pills-custom-fields-test' }}
+        defaultValue={[{ name: 'Nihar', value: '1' }]}
+        getOptionLabel={(option) => option.name}
+        getOptionValue={(option) => option.value}
+        isMulti
+        options={customOptions}
+    />
+  )
+
+  const kit = screen.getByTestId('pills-custom-fields-test')
+  const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
+  expect(pill).toBeInTheDocument()
+  expect(pill).toHaveTextContent("Nihar")
+})

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

@@ -62,8 +62,9 @@ type TypeaheadProps = {
 } & GlobalProps
 
 export type SelectValueType = {
-  label: string,
+  label?: string,
   value: string,
+  name?: string,
   imageUrl?: string,
   pillColor?: string,
 }

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

@@ -18,9 +18,12 @@ type Props = {
 
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
-  const { imageUrl, label } = props.data
+  const { imageUrl } = props.data
   const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
 
+  // Extract label - use data.label or data.name if available, otherwise use empty string
+  const label = props.data.label || props.data.name || ''
+
   // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
   if (inputDisplay === 'none') {
     return null

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

@@ -15,5 +15,5 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: 1,
+    truncate: "1",
 }) %>

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

@@ -17,7 +17,7 @@ const TypeaheadTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={1}
+          truncate={"1"}
           {...props}
       />
     </>

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

@@ -123,6 +123,10 @@ module Playbook
         end
         base_options
       end
+
+      def truncate_props
+        nil unless is_react?
+      end
     end
   end
 end