playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play277814027

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../_time_picker'
+
+const TimePickerRequiredIndicator = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-required-indicator"
+        label="Select Time"
+        requiredIndicator
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerRequiredIndicator
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -9,6 +9,7 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
   
   
@@ -21,4 +22,5 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_on_handler: onChange & onClose Handlers

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

@@ -7,3 +7,4 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
 export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
 export { default as TimePickerError } from './_time_picker_error.jsx'
 export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
+export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'

data/app/pb_kits/playbook/pb_time_picker/time_picker.rb

@@ -16,6 +16,8 @@ module Playbook
       prop :name, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
       prop :time_format, type: Playbook::Props::Enum,
@@ -68,6 +70,7 @@ module Playbook
           minTime: min_time,
           name: name,
           required: required,
+          requiredIndicator: required_indicator,
           showTimezone: show_timezone,
           timeFormat: time_format,
           validationMessage: validation_message,

data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent } from '../utilities/test-utils'
+import { render, screen, fireEvent, within } from '../utilities/test-utils'
 
 import TimePicker from './_time_picker'
 
@@ -111,4 +111,50 @@ describe('TimePicker', () => {
     expect(screen.getByText('AM')).toBeInTheDocument()
     expect(screen.getByText('PM')).toBeInTheDocument()
   })
+
+  test('renders required indicator asterisk when requiredIndicator is true', () => {
+    render(
+      <TimePicker
+          data={{ testid: 'required-indicator-picker' }}
+          label="Select Time"
+          requiredIndicator
+      />
+    )
+    const kit = screen.getByTestId('required-indicator-picker')
+    const label = within(kit).getByText(/Select Time/)
+    
+    expect(label).toBeInTheDocument()
+    expect(kit).toHaveTextContent('*')
+  })
+
+  test('requiredIndicator works independently of required prop', () => {
+    render(
+      <TimePicker
+          data={{ testid: 'indicator-without-required' }}
+          label="Select Time"
+          requiredIndicator
+      />
+    )
+    const kit = screen.getByTestId('indicator-without-required')
+    
+    expect(kit).toHaveTextContent('*')
+    const input = screen.getByPlaceholderText('Select Time')
+    expect(input).not.toHaveAttribute('required')
+  })
+
+  test('requiredIndicator and required can be used together', () => {
+    render(
+      <TimePicker
+          data={{ testid: 'both-props-picker' }}
+          label="Select Time"
+          required
+          requiredIndicator
+      />
+    )
+    const kit = screen.getByTestId('both-props-picker')
+    const input = screen.getByPlaceholderText('Select Time')
+    
+    expect(kit).toHaveTextContent('*')
+    expect(input).toHaveAttribute('required')
+  })
 })

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