RubyGems - playbook_ui - Versions diffs - 16.1.0.pre.alpha.play276813969 → 16.1.0.pre.alpha.play277814027 - Mend

playbook_ui 16.1.0.pre.alpha.play276813969 → 16.1.0.pre.alpha.play277814027

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb CHANGED Viewed

@@ -65,7 +65,7 @@
 }] %>
 <%= pb_rails("multi_level_select", props: {
-  id: "select_a_department",
-  label: "Select a Department",
-  tree_data: treeData
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx CHANGED Viewed

@@ -73,11 +73,14 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id="select_a_department"
+          id='multiselect-label'
           label="Select a Department"
           onSelect={(selectedNodes) =>
-            console.log("Selected Items", selectedNodes)
-          }
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
           treeData={treeData}
           {...props}
       />
@@ -85,4 +88,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx CHANGED Viewed

@@ -192,7 +192,7 @@ describe('MultiLevelSelect multi variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multi-disabled-test_input')
+    const input = kit.querySelector('#multiselect_input')
     fireEvent.click(input)
     const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
@@ -227,7 +227,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#single-disabled-test_input')
+    const input = kit.querySelector('#multiselect_input')
     fireEvent.click(input)
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -246,7 +246,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#single-disabled-click-test_input')
+    const input = kit.querySelector('#multiselect_input')
     fireEvent.click(input)
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -267,7 +267,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#single-enabled-click-test_input')
+    const input = kit.querySelector('#multiselect_input')
     fireEvent.click(input)
     const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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')
+  })
 })