playbook_ui 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible13821 → 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible14075

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d939aea02ce3a4f2c4b4fef3a3167caffa5ffcb62f263496c3d28c69f0dcd0f4
-  data.tar.gz: 4551f5959fe2a467396b057ad3e113d572c2dddadc5cf05e29b76302b6079ca4
+  metadata.gz: 5c7f885e032477472414e8ce6f9088197176832837c8d18bda0ce717d3e6f246
+  data.tar.gz: 0700d8674fd76047935a0dda354f5db7ab76db5336dee8795e4582a112370853
 SHA512:
-  metadata.gz: 162e5837f327e866b090bb5d365f16f601ed095206eb89629ae98b124c0d8e1a5c5e0682df498175f460f53f221c6091b303d6767c37f5ecb6a1ff90cd4d6458
-  data.tar.gz: f02c17129d23078e67191024c8d1194353eb48f5623167a994c8795438954de246d9ed42d494fb18c39b48ca2726f5fdcc8522596c65d292b5141676836a3807
+  metadata.gz: babf6b575d171454749d74f7dc22f53239822f040304068b31b1f11ff8790d011ea51f682b9ac596c66874d4dd4e31d6106b9d2fb9a25c4ccd8fbc1e32e8d139
+  data.tar.gz: '09ffb2a754abce95f58c3a675415aab6038eca4dba6e0bf3aeb25e7ab637551cd23ce76ec3b25047f9a6b3cc76fee7cc20144e0777e994a5657dc128eb9ca94f'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,6 +4,8 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import colors from '../tokens/exports/_colors.module.scss'
+import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -19,6 +21,7 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -39,6 +42,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
+    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -124,7 +128,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
+        {requiredIndicator && (
+          <span
+              aria-hidden="true"
+              className="pb_required_indicator"
+              style={{
+                color: colors.error,
+                marginLeft: spacing.space_xs,
+              }}
+          >
+           {'*'}
+          </span>
+        )}
       </Body>
+
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,6 +5,15 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
+      <%= object.text%>
+      <% if object.required_indicator %>
+        <span
+          class="pb_checkbox_required_indicator"
+          aria-hidden="true"
+          style="color: #DA0014;"
+        >*</span>
+      <% end %>
+    <% end %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,6 +23,8 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_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_checkbox/docs/example.yml

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,6 +196,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
+  const errorId = error ? `${pickerId}-error` : undefined
+
   return (
     <div
         {...ariaProps}
@@ -211,14 +213,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
+           <label htmlFor={pickerId}>
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
+          </label>
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
+                  aria-describedby={errorId}
+                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -232,6 +238,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
+                      aria={{ atomic: "true", live: "polite" }}
+                      htmlOptions={{ role: "alert" }}
+                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md

@@ -0,0 +1 @@
+`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -135,6 +135,8 @@
     position: sticky;
     top: 0;
     background-color: $white;
+    border-top-left-radius: $border_radius_md;
+    border-top-right-radius: $border_radius_md;
     z-index: $z_8;
   }
 
@@ -256,7 +258,7 @@
   }
   &.full_height_left {
     justify-content: flex-start;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -302,7 +304,7 @@
 
   &.full_height_center {
     justify-content: center;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -346,7 +348,7 @@
 
   &.full_height_right {
     justify-content: flex-end;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -417,7 +419,7 @@
       margin: unset !important;
       margin-right: auto !important;
     }
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -463,7 +465,7 @@
 
   &.full_height_center {
     justify-content: center;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -510,7 +512,7 @@
       margin: unset !important;
       margin-left: auto !important;
     }
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -76,6 +76,12 @@
       z-index: $z_1;
       width: 100%;
 
+      &.constrain_height {
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: 18em;
+      }
+
       .pb_dropdown_option,
       .pb_dropdown_option_list,
       .pb_dropdown_option_selected,

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,8 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    clearable?: boolean;
+    constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -49,6 +51,7 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
+    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -74,6 +77,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        clearable = true,
+        constrainHeight = false,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -87,6 +92,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
+        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -113,6 +119,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
+    // Use a suffix for the trigger ID to avoid conflict with the outer div's id
+    const sanitizeForId = (str: string) =>
+      str.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
+    const selectId = id
+      ? `${id}_trigger`
+      : label
+        ? sanitizeForId(label)
+        : undefined;
+    const errorId = error ? `${selectId}-error` : undefined;
+
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
@@ -145,9 +161,19 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const dropdownRef = useRef(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef(null);
+    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
     const dropdownContainerRef = useRef(null);
 
+    const handleLabelClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (selectId) {
+        const trigger = document.getElementById(selectId);
+        if (trigger) trigger.focus();
+      }
+      setIsInputFocused(true);
+      toggleDropdown();
+    };
+
     const selectedArray = Array.isArray(selected)
     ? selected
     : selected && Object.keys(selected).length
@@ -211,6 +237,34 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         }
     }, [isDropDownClosed]);
 
+    // Auto-position dropdown above/below based on available space
+    useEffect(() => {
+        if (!isDropDownClosed && dropdownContainerRef.current) {
+            const container = dropdownContainerRef.current;
+            const wrapper = container.closest('.dropdown_wrapper') as HTMLElement;
+            if (!wrapper) return;
+
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const h = container.getBoundingClientRect().height || container.scrollHeight;
+            const spaceBelow = window.innerHeight - wrapperRect.bottom;
+            const spaceAbove = wrapperRect.top;
+
+            // If not enough space below but enough space above, position above
+            if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+                container.style.top = "auto";
+                container.style.bottom = "calc(100% + 5px)";
+                container.style.marginTop = "0";
+                container.style.marginBottom = "0";
+            } else {
+                // Default: position below
+                container.style.top = "";
+                container.style.bottom = "";
+                container.style.marginTop = "";
+                container.style.marginBottom = "";
+            }
+        }
+    }, [isDropDownClosed, dropdownContainerRef]);
+
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFilterItem(e.target.value);
@@ -375,10 +429,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
+                    clearable,
                     dropdownContainerRef,
-                    filteredOptions,
+                    error,
+                    errorId,
                     filterItem,
+                    filteredOptions,
                     focusedOptionIndex,
+                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -388,6 +446,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -399,13 +458,20 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label &&
-                    <Caption
-                        dark={dark}
-                        marginBottom="xs"
-                        text={label}
-                    />
-                }
+                {label && (
+                    <label
+                        data-dropdown="pb-dropdown-label"
+                        htmlFor={selectId}
+                        onClick={handleLabelClick}
+                    >
+                        <Caption
+                            className="pb_dropdown_kit_label"
+                            dark={dark}
+                            marginBottom="xs"
+                            text={label}
+                        />
+                    </label>
+                )}
                 <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -426,8 +492,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger />
-                            <DropdownContainer>
+                            <DropdownTrigger placeholder={placeholder} />
+                            <DropdownContainer constrainHeight={constrainHeight}>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <DropdownOption key={option.id}
@@ -438,12 +504,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     )}
 
-                    {error &&
+                    {error && (
                         <Body
+                            aria={{ atomic: "true", live: "polite" }}
+                            dark={dark}
+                            htmlOptions={{ role: "alert" }}
+                            id={errorId}
                             status="negative"
                             text={error}
                         />
-                    }
+                    )}
                 </div>
             </DropdownContext.Provider>
         </div>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md

@@ -0,0 +1,3 @@
+The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md

@@ -0,0 +1,3 @@
+The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-reset-closeable",
+  label: "Quick Pick",
+  variant: "quickpick",
+  clearable: false
+}) %>
+
+<%= pb_rails("button", props: {
+  margin_y: "md",
+  text: "Reset",
+  html_options: {
+    onclick: "handleReset()"
+  }
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-default",
+  options: options,
+  clearable: false,
+  default_value: options.last,
+  margin_bottom: "md",
+  label: "Default"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-subtle",
+  options: options,
+  clearable: false,
+  default_value: options.second,
+  variant: "subtle",
+  separators: false,
+  label: "Subtle"
+}) %>
+
+<script>
+  function handleReset() {
+    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
+    const instance = dropdown?._pbDropdownInstance;
+    
+    if (instance) {
+      instance.clearSelection();
+    }
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithClearable = (props) => {
+    const dropdownRef = useRef(null)
+
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ]
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                clearable={false}
+                label="Quick Pick"
+                onSelect={() => {}}
+                ref={dropdownRef}
+                variant="quickpick"
+                {...props}
+            />
+            <Button
+                marginY="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[options.length - 1]}
+                label="Default"
+                marginBottom="md"
+                options={options}
+                variant="default"
+                {...props}
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[1]}
+                label="Subtle"
+                options={options}
+                separators={false}
+                variant="subtle"
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownWithClearable

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md

@@ -0,0 +1,5 @@
+The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
+
+This is useful in two scenarios:
+1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
+2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithConstrainHeight = (props) => {
+  // Create a long list of options to demonstrate height constraint
+  const options = Array.from({ length: 30 }, (_, i) => ({
+    label: `Option ${i + 1}`,
+    value: `option_${i + 1}`,
+    id: `opt_${i + 1}`
+  }))
+
+  return (
+    <>
+      <Dropdown
+          data={{ testid: "dropdown-no-constrain" }}
+          label="Without Constrain Height (Default)"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+
+      <Dropdown
+          constrainHeight
+          data={{ testid: "dropdown-constrain" }}
+          label="With Constrain Height"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DropdownWithConstrainHeight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb

@@ -0,0 +1,20 @@
+<% 
+  # Create a long list of options to demonstrate height constraint
+  options = (1..30).map do |i|
+    { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
+  end
+%>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-no-constrain",
+  options: options,
+  label: "Without Constrain Height (Default)",
+  margin_bottom: "md"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-constrain",
+  options: options,
+  constrain_height: true,
+  label: "With Constrain Height"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md

@@ -0,0 +1,8 @@
+The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
+
+When `constrain_height` is `true`, the dropdown will:
+- Have a maximum height of 18em
+- Show a scrollbar when content exceeds the max height
+- Prevent the dropdown from extending beyond the viewport
+
+This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.