playbook_ui 16.2.0.pre.rc.3 → 16.2.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32329d30bbf7b450881c2b19834055c65a16a4cdea81592c6ef6da112fd9b59a
-  data.tar.gz: c576862ae25937f8c5ef5a06a2553884fccabb24260db9a6931f8a54312dab42
+  metadata.gz: 6cbd889b9a1aa2f70a8e5face90b1685b992b488955160332f43ec6f1318002a
+  data.tar.gz: a33d29f7f1ff25e1bdbb43310eeb9c37921dbca784b743b1ff915113f94a7789
 SHA512:
-  metadata.gz: 350cd02e41b535c9d5977c06e33a05cc4bfec6313c9cbd9dd55893ce6fb1cb8d07dcb532fd89a156da273294f69126f06f31a2920cf9825ef414185a94365f2b
-  data.tar.gz: a5c055399e9712400063347fb1c1413539b391ff588a1f4102b5cfe525a6e6c54fcb895825e7d460996940064be2ac4d68a904f867b05f7588f8b6bf573924b1
+  metadata.gz: cee893abfc5a440ffeb004484e5f511a7514a76f7ef2816f87749f648241b9c8a7c1ede0a93d9610d639a863e0934588b85585941edd8abab59ef54e37d02cb1
+  data.tar.gz: 230cd647c00dae8f14eac937320e4ebd9d4128bf2ac92e3f3700be1c19b52df2c65b83e3667558aa569c76099c99990a9e7a76286530359a661ea7773f5f9ad6

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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_dropdown/_dropdown.tsx

@@ -119,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")
@@ -151,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
@@ -411,9 +431,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     autocomplete,
                     clearable,
                     dropdownContainerRef,
-                    filteredOptions,
+                    error,
+                    errorId,
                     filterItem,
+                    filteredOptions,
                     focusedOptionIndex,
+                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -423,6 +446,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -434,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
@@ -473,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_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

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

@@ -1,10 +1,13 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
-
 %>
 
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
+<%= pb_rails("dropdown", props: {
+  id: "select_a_country",
+  label: "Select a Country",
+  options: options
+}) %>

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

@@ -25,6 +25,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

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

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element. 
+
+Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,11 +1,13 @@
 <%= pb_content_tag do %>
     <% if object.label.present? %>
-        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+        <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
+            <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
+        </label>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
             data-default-value="<%= input_default_value %>"
-            id="dropdown-selected-option"
+            data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
             <%= object.required ? "required" : ""%>
@@ -16,9 +18,11 @@
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+            <% if object.error.present? %>
+                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
+            <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select, placeholder: object.placeholder }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
@@ -27,7 +31,9 @@
                 <% end %>
             <% end %>
 
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+            <% if object.error.present? %>
+                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
+            <% end %>
         <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -10,6 +10,7 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
+      prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
@@ -68,6 +69,14 @@ module Playbook
         generate_classname("pb_dropdown", variant, separators_class)
       end
 
+      def select_id
+        id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
+      end
+
+      def error_id
+        error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,6 +1,10 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
+        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
+            <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
+            <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
+            <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
+        >
           <%= content.presence %>
         </div>
     <% else %>
@@ -9,24 +13,25 @@
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
         cursor: object.autocomplete ? "text" : "pointer",
+        id: object.select_id,
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: {tabindex:"0"}
+        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;">
+                        <div data-dropdown-trigger-custom-display style="display: none;">
                             <%= object.custom_display %>
                         </div>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
                     <% end %>
                 <% else %>
                     <% if object.multi_select %>
                         <%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
-                            <%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
+                            <%= pb_rails("flex", props: { data: { 'dropdown-pills-wrapper': true }, wrap: true }) do %>
                             <% end %>   
                         <% if object.autocomplete %>
                                 <input
@@ -37,7 +42,7 @@
                                     autocomplete="off"
                                 />
                             <% else %>
-                                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
+                                <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { "dropdown-trigger-display-multi-select": true }}) %>
                             <% end %>
                         <% end %>
                     <% else %>
@@ -50,7 +55,7 @@
                                 autocomplete="off"
                             />
                         <% else %>
-                            <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                            <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
                         <% end %>
                     <% end %>
                 <% end %>
@@ -58,9 +63,9 @@
         <% end %>
             <%= pb_rails("flex/flex_item") do %>
                 <%= pb_rails("body", props: {display: "flex", align_items:"center" }) do  %>
-                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", data:{'dropdown-clear-icon': true }, padding_right:"xs" }) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", data:{'dropdown-open-icon': true }}) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", data:{ 'dropdown-close-icon': true }}) %>
                 <% end %>
             <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -13,6 +13,10 @@ module Playbook
                           default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
+      prop :select_id, type: Playbook::Props::String
+      prop :label, type: Playbook::Props::String
+      prop :error_id, type: Playbook::Props::String
+      prop :error, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)