playbook_ui 16.1.0.pre.alpha.play2771passphraseaccessibility14033 → 16.1.0.pre.alpha.play264213817

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx

@@ -5,12 +5,12 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 import SelectableCard from '../pb_selectable_card/_selectable_card'
 import TextInput from '../pb_text_input/_text_input'
-import colors from '../tokens/exports/_colors.module.scss'
 
 import {
   parseTime,
   parseTimeToMinutes,
   isTimeInRange as isTimeInRangeHelper,
+  isHourDisabled as isHourDisabledHelper,
   isAnyAMTimeValid as isAnyAMTimeValidHelper,
   isAnyPMTimeValid as isAnyPMTimeValidHelper,
   getDisplayTime,
@@ -48,7 +48,6 @@ type TimePickerProps = {
   onChange?: (time: string) => void,
   onClose?: (time: string) => void,
   required?: boolean,
-  requiredIndicator?: boolean,
   showTimezone?: boolean,
   timeFormat?: TimeFormat,
   validationMessage?: string,
@@ -73,7 +72,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     onChange,
     onClose,
     required = false,
-    requiredIndicator = false,
     showTimezone = false,
     timeFormat = 'AMPM',
     validationMessage,
@@ -116,6 +114,10 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     return isTimeInRangeHelper(h, m, mer, timeFormat, minTimeMinutes, maxTimeMinutes)
   }
 
+  const isHourDisabled = (h: number, mer?: 'AM' | 'PM'): boolean => {
+    return isHourDisabledHelper(h, mer, timeFormat, minTimeMinutes, maxTimeMinutes)
+  }
+
   const isCurrentTimeValid = (h: number, m: number, mer: 'AM' | 'PM'): boolean => {
     return isTimeInRange(h, m, mer)
   }
@@ -185,28 +187,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
   const [showHourDropdown, setShowHourDropdown] = useState(false)
   const [showMinuteDropdown, setShowMinuteDropdown] = useState(false)
 
-  // Clicking the clock add-on opens the dropdown
-  useEffect(() => {
-    if (disabled) return
-
-    const addOnCard = document.querySelector(`#${uniqueId}-input`)?.closest('.text_input_wrapper_add_on')?.querySelector('.add-on-card') as HTMLElement
-    
-    if (addOnCard) {
-      const handleAddOnClick = (e: Event) => {
-        e.preventDefault()
-        e.stopPropagation()
-        setShowDropdown(true)
-      }
-      
-      addOnCard.addEventListener('click', handleAddOnClick)
-      addOnCard.style.cursor = 'pointer'
-      
-      return () => {
-        addOnCard.removeEventListener('click', handleAddOnClick)
-      }
-    }
-  }, [uniqueId, disabled, setShowDropdown])
-
   // Input dropdown scrolling
   const scrollDropdownToSelected = (dropdownRef: React.RefObject<HTMLDivElement>) => {
     if (dropdownRef.current) {
@@ -389,10 +369,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     }
   }
 
-  const handleHourFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    e.target.select()
-  }
-
   const handleHourBlur = () => {
     const result = normalizeHourOnBlur(hourInputValue, hour, timeFormat)
     setHour(result.hour)
@@ -417,10 +393,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     }
   }
 
-  const handleMinuteFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    e.target.select()
-  }
-
   const handleMinuteBlur = () => {
     const result = normalizeMinuteOnBlur(minuteInputValue, minute)
     setMinute(result.minute)
@@ -510,30 +482,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
       e.preventDefault()
       setShowHourDropdown(false)
       closeDropdown()
-    } else if (e.key === 'ArrowDown') {
-      // ArrowDown increases value (like scrolling down a list)
-      e.preventDefault()
-      const { maxHour, minHour } = getHourConstraints(timeFormat)
-      const newHour = hour >= maxHour ? minHour : hour + 1
-      setHour(newHour)
-      setHourInputValue(timeFormat === '24hour' ? newHour.toString().padStart(2, '0') : newHour.toString())
-      setHasSelectedTime(true)
-      const timeString = get24HourTime(newHour, minute, meridiem, timeFormat)
-      if (onChange) {
-        onChange(timeString)
-      }
-    } else if (e.key === 'ArrowUp') {
-      // ArrowUp decreases value (like scrolling up a list)
-      e.preventDefault()
-      const { maxHour, minHour } = getHourConstraints(timeFormat)
-      const newHour = hour <= minHour ? maxHour : hour - 1
-      setHour(newHour)
-      setHourInputValue(timeFormat === '24hour' ? newHour.toString().padStart(2, '0') : newHour.toString())
-      setHasSelectedTime(true)
-      const timeString = get24HourTime(newHour, minute, meridiem, timeFormat)
-      if (onChange) {
-        onChange(timeString)
-      }
     }
   }
 
@@ -565,28 +513,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
       e.preventDefault()
       setShowMinuteDropdown(false)
       closeDropdown()
-    } else if (e.key === 'ArrowDown') {
-      // ArrowDown increases value (like scrolling down a list)
-      e.preventDefault()
-      const newMinute = minute >= 59 ? 0 : minute + 1
-      setMinute(newMinute)
-      setMinuteInputValue(newMinute.toString().padStart(2, '0'))
-      setHasSelectedTime(true)
-      const timeString = get24HourTime(hour, newMinute, meridiem, timeFormat)
-      if (onChange) {
-        onChange(timeString)
-      }
-    } else if (e.key === 'ArrowUp') {
-      // ArrowUp decreases value (like scrolling up a list)
-      e.preventDefault()
-      const newMinute = minute <= 0 ? 59 : minute - 1
-      setMinute(newMinute)
-      setMinuteInputValue(newMinute.toString().padStart(2, '0'))
-      setHasSelectedTime(true)
-      const timeString = get24HourTime(hour, newMinute, meridiem, timeFormat)
-      if (onChange) {
-        onChange(timeString)
-      }
     }
   }
 
@@ -699,22 +625,12 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     >
       {label && (
         <label htmlFor={`${uniqueId}-input`}>
-          {requiredIndicator ? (
-            <Caption
-                className="pb_time_picker_kit_label"
-                marginBottom="xs"
-                size="md"
-            >
-              {label} <span style={{ color: `${colors.error}` }}>{'*'}</span>
-            </Caption>
-          ) : (
-            <Caption
-                className="pb_time_picker_kit_label"
-                marginBottom="xs"
-                size="md"
-                text={label}
-            />
-          )}
+          <Caption
+              className="pb_time_picker_kit_label"
+              marginBottom="xs"
+              size="md"
+              text={label}
+          />
         </label>
       )}
       <div className="time_picker_wrapper">
@@ -773,7 +689,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                     onBlur={handleHourBlur}
                     onChange={handleHourChange}
                     onClick={() => { setShowHourDropdown(!showHourDropdown); setShowMinuteDropdown(false) }}
-                    onFocus={handleHourFocus}
                     onKeyDown={handleHourKeyDown}
                     pattern="[0-9]*"
                     ref={hourInputRef}
@@ -819,7 +734,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                     onBlur={handleMinuteBlur}
                     onChange={handleMinuteChange}
                     onClick={() => { setShowMinuteDropdown(!showMinuteDropdown); setShowHourDropdown(false) }}
-                    onFocus={handleMinuteFocus}
                     onKeyDown={handleMinuteKeyDown}
                     pattern="[0-9]*"
                     ref={minuteInputRef}

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import TimePicker from '../../pb_time_picker/_time_picker'
 import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
 
 const TimePickerOnHandler = (props) => {
   const [selectedTime, setSelectedTime] = useState('')
@@ -18,9 +17,7 @@ const TimePickerOnHandler = (props) => {
   return (
     <div>
       {(selectedTime || closedTime) && (
-        <Flex marginBottom="sm" 
-            orientation="column"
-        >
+        <div style={{ marginBottom: '16px' }}>
           {selectedTime && (
             <Body
                 text={`onChange: ${selectedTime}`}
@@ -32,7 +29,7 @@ const TimePickerOnHandler = (props) => {
                 text={`onClose: ${closedTime}`}
             />
           )}
-        </Flex>
+        </div>
       )}
       <TimePicker
           id="time-picker-on-handler"

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

@@ -9,7 +9,6 @@ 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
   
   
@@ -22,5 +21,4 @@ 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,4 +7,3 @@ 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,8 +16,6 @@ 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,
@@ -70,7 +68,6 @@ 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, within } from '../utilities/test-utils'
+import { render, screen, fireEvent } from '../utilities/test-utils'
 
 import TimePicker from './_time_picker'
 
@@ -111,50 +111,4 @@ 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,27 +290,4 @@ 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,9 +62,8 @@ 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,12 +18,9 @@ type Props = {
 
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
-  const { imageUrl } = props.data
+  const { imageUrl, label } = 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,10 +123,6 @@ module Playbook
         end
         base_options
       end
-
-      def truncate_props
-        nil unless is_react?
-      end
     end
   end
 end