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

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,6 +120,7 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
+        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("passphrase", props: {
+  id: "passphrase_required_indicator",
+  label: "Passphrase",
+  placeholder: "Enter passphrase",
+  required_indicator: true,
+  value: "passphrase",
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Passphrase from '../_passphrase'
+
+const PassphraseRequiredIndicator = (props) => {
+  const [passphrase, setPassphrase] = useState('')
+  const handleOnChangePassphrase = (e) => {
+    setPassphrase(e.target ? e.target.value : e)
+  }
+
+  return (
+      <Passphrase
+          id="passphrase_required_indicator"
+          label="Passphrase"
+          name="passphrase"
+          onChange={handleOnChangePassphrase}
+          requiredIndicator
+          value={passphrase}
+          {...props}
+      />
+  )
+}
+
+export default PassphraseRequiredIndicator

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_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_passphrase/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -19,3 +20,4 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator

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

@@ -6,3 +6,4 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
+export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -10,6 +10,7 @@ module Playbook
                              values: %w[always xs sm md lg xl],
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
       prop :value, type: Playbook::Props::String
 
       def classname
@@ -23,6 +24,7 @@ module Playbook
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
+          requiredIndicator: required_indicator,
           showTipsBelow: show_tips_below,
           tips: tips,
           uncontrolled: true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, within } from '../utilities/test-utils'
 import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
@@ -86,3 +86,32 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
+
+test('renders required indicator asterisk when requiredIndicator is true', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+        requiredIndicator
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).toHaveTextContent('*')
+})
+
+test('does not render required indicator asterisk when requiredIndicator is false', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).not.toHaveTextContent('*')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -36,6 +36,7 @@ type PhoneNumberInputProps = {
   excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
+  requiredIndicator?: boolean,
   value?: string,
   formatAsYouType?: boolean,
   strictMode?: boolean,
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onlyCountries = [],
     excludeCountries = [],
     required = false,
+    requiredIndicator = false,
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
@@ -533,6 +535,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       validateErrors()
     },
     onChange: formatAsYouType ? undefined : handleOnChange,
+    requiredIndicator,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+  id: "phone_number_input_required_indicator",
+  label: "Required Phone Number",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputRequiredIndicator = (props) => (
+    <>
+        <PhoneNumberInput
+            id='phone_number_input_required_indicator'
+            label='Phone Number'
+            requiredIndicator
+            {...props} />
+    </>
+)
+
+export default PhoneNumberInputRequiredIndicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_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_phone_number_input/docs/example.yml

@@ -12,6 +12,7 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -24,3 +25,4 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator

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

@@ -9,3 +9,4 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
+export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,6 +7,8 @@ module Playbook
                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -52,6 +54,7 @@ module Playbook
           excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
+          requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
         }

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act } from "../utilities/test-utils";
+import { render, screen, act, within } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -129,7 +129,7 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
     };
 
     render(<PhoneNumberInput {...props} />);
-    
+
     const input = screen.getByRole("textbox");
     
     act(() => {
@@ -154,7 +154,38 @@ test("should pass countrySearch prop to component", () => {
     };
   
     render(<PhoneNumberInput {...props} />);
-    
+
     const wrapper = screen.getByTestId('phone-input-with-search');
     expect(wrapper).toBeInTheDocument();
 });
+
+test("renders required indicator asterisk when requiredIndicator is true", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Required Phone Number",
+        requiredIndicator: true,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Required Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).toHaveTextContent("*");
+});
+
+test("does not render required indicator asterisk when requiredIndicator is false", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Phone Number",
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).not.toHaveTextContent("*");
+});  

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -120,6 +120,7 @@ const Textarea = ({
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
+  const errorId = error ? `${id}-error` : undefined
 
   return (
     <div
@@ -145,7 +146,10 @@ const Textarea = ({
     )}
       {children || (
         <textarea
+            aria-describedby={errorId}
+            aria-invalid={!!error}
             disabled={disabled}
+            id={id}
             name={name}
             onChange={emojiMask ? handleChange : onChange}
             onPaste={emojiMask ? handlePaste : undefined}
@@ -167,6 +171,9 @@ const Textarea = ({
             >
               <FlexItem>
                 <Body
+                    aria={{ atomic: "true", live: "polite" }}
+                    htmlOptions={{ role: "alert" }}
+                    id={errorId}
                     margin="none"
                     status="negative"
                     text={error}
@@ -182,6 +189,9 @@ const Textarea = ({
             </Flex>
           ) : (
             <Body
+                aria={{ atomic: "true", live: "polite" }}
+                htmlOptions={{ role: "alert" }}
+                id={errorId}
                 status="negative"
                 text={error}
             />

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
 
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
 
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
 
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md

@@ -0,0 +1 @@
+Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,12 +1,14 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
+    <label for="<%= object.input_options[:id] || object.id %>" >
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>
+      <% else %>
+        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
       <% end %>
-    <% else %>
-    <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
-    <% end %>
+    </label>
   <% end %>
   <% if content.present? %>
     <%= content %>
@@ -22,14 +24,28 @@
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>
           <%= pb_rails("flex/flex_item") do %>
-             <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+            <%= pb_rails("body", props: {
+              dark: object.dark,
+              status: "negative",
+              text: object.error,
+              id: object.error_id,
+              aria: { atomic: "true", live: "polite" },
+              html_options: { role: "alert" },
+            }) %>
           <% end %>
           <%= pb_rails("flex/flex_item") do %>
             <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
           <% end %>
         <% end %>
       <% else %>
-        <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+        <%= pb_rails("body", props: {
+          dark: object.dark,
+          status: "negative",
+          text: object.error,
+          id: object.error_id,
+          aria: { atomic: "true", live: "polite" },
+          html_options: { role: "alert" },
+        }) %>
       <% end %>
     <% else %>
       <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -47,7 +47,9 @@ module Playbook
         merged_data = data_attrs.merge(input_data)
 
         base_attributes = {
-          id: input_options[:id] || "object_method",
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
+          id: input_options[:id] || id || "object_method",
           max_characters: max_characters,
           name: name,
           onkeyup: onkeyup,
@@ -66,6 +68,10 @@ module Playbook
         result
       end
 
+      def error_id
+        "#{id}-error" if error.present?
+      end
+
     private
 
       def error_class

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,6 +48,7 @@ type TimePickerProps = {
   onChange?: (time: string) => void,
   onClose?: (time: string) => void,
   required?: boolean,
+  requiredIndicator?: boolean,
   showTimezone?: boolean,
   timeFormat?: TimeFormat,
   validationMessage?: string,
@@ -72,6 +73,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     onChange,
     onClose,
     required = false,
+    requiredIndicator = false,
     showTimezone = false,
     timeFormat = 'AMPM',
     validationMessage,
@@ -114,10 +116,6 @@ 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)
   }
@@ -187,6 +185,28 @@ 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) {
@@ -369,6 +389,10 @@ 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)
@@ -393,6 +417,10 @@ 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)
@@ -482,6 +510,30 @@ 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)
+      }
     }
   }
 
@@ -513,6 +565,28 @@ 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)
+      }
     }
   }
 
@@ -625,12 +699,22 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     >
       {label && (
         <label htmlFor={`${uniqueId}-input`}>
-          <Caption
-              className="pb_time_picker_kit_label"
-              marginBottom="xs"
-              size="md"
-              text={label}
-          />
+          {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}
+            />
+          )}
         </label>
       )}
       <div className="time_picker_wrapper">
@@ -689,6 +773,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                     onBlur={handleHourBlur}
                     onChange={handleHourChange}
                     onClick={() => { setShowHourDropdown(!showHourDropdown); setShowMinuteDropdown(false) }}
+                    onFocus={handleHourFocus}
                     onKeyDown={handleHourKeyDown}
                     pattern="[0-9]*"
                     ref={hourInputRef}
@@ -734,6 +819,7 @@ 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,6 +1,7 @@
 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('')
@@ -17,7 +18,9 @@ const TimePickerOnHandler = (props) => {
   return (
     <div>
       {(selectedTime || closedTime) && (
-        <div style={{ marginBottom: '16px' }}>
+        <Flex marginBottom="sm" 
+            orientation="column"
+        >
           {selectedTime && (
             <Body
                 text={`onChange: ${selectedTime}`}
@@ -29,7 +32,7 @@ const TimePickerOnHandler = (props) => {
                 text={`onClose: ${closedTime}`}
             />
           )}
-        </div>
+        </Flex>
       )}
       <TimePicker
           id="time-picker-on-handler"

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("time_picker", props: {
+  id: "time-picker-required-indicator",
+  label: "Select Time",
+  required_indicator: true,
+}) %>
+