playbook_ui 15.1.0.pre.alpha.play252710946 → 15.1.0.pre.alpha.testingtiptap11004

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1356285c2892298ab0d74134116ab03ac8559495657fddba5c09715c495b8f8b
-  data.tar.gz: e780800f41ea2ca322b7cfb5e15b1e0b8ca1b58ff949e196771987b45a659b79
+  metadata.gz: 7666b6fac1ed12cd57f6e04399e9435d460a274c5d44d38216ce0ed94024cde7
+  data.tar.gz: de5912fdd691035fb02f2a92d9692309a08586ec430141ee8ed0b64ee5b3e70e
 SHA512:
-  metadata.gz: '0930a43f3351acff7849b6eee6c89b565d5454d59a7b81aa4e6b08571d353203c9d47894c4c1cbeb1c3f17d0106fcbe1e7f77a6958cc176ce5f1a2143393aef6'
-  data.tar.gz: ae3b1306ae43c73b5a86f949cccd21cead3e2c74b81f59caee59f80b8b53509fe791ef4bc54000580526f29d82f77cf82e11eccf23f69d8173ac8174b675fd2e
+  metadata.gz: 60685d79142f02e761606168b87b47bd68384f8f112270e2a77ffd8233b02660fd949ddc288160a769dad5ce70e32a814509f90dd15b6b4cd6bcfb51088cde41
+  data.tar.gz: 3b8ceb9c5588c986fd04fcbbdf230e5d6a0a2852afd72d11d4c06685433b717e468e44ee9ec63756fbbe887812f9977a7013f87e62ca1e07108acc22aeb2eb41

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

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

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,15 +21,6 @@
   ]
 %>
 
-<%
-  example_typeahead_options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -97,9 +88,7 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>  
-  <%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
-  <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -12,7 +12,6 @@
 }
 
 @mixin preview_tiptap_p {
-    margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
@@ -56,13 +55,9 @@
 }
 
 @mixin preview_tiptap_blockquote {
-    font-size: $font_larger;
-    padding: $space_sm $space_md;
-    font-style: italic;
-    margin: 1rem 0 0 0;
-    p {
-        margin: 0;
-    }
+    border-left: 3px solid $text_lt_lighter;
+    margin: 1.5rem 0;
+    padding-left: 1rem;
 }
 
 @mixin preview_tiptap_h1 {
@@ -70,7 +65,6 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 2.1rem 0 0 0;
 }
 
 @mixin preview_tiptap_h2 {
@@ -78,7 +72,6 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 1.9rem 0 0 0;
 }
 
 @mixin preview_tiptap_h3 {
@@ -86,7 +79,6 @@
     line-height: $text_large;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 1.7rem 0 0 0;
 }
 
 @mixin preview_tiptap_smaller_headings {
@@ -94,7 +86,6 @@
     line-height: $text_base;
     letter-spacing: $lspace_tight;
     font-weight: $bolder;
-    margin: 1rem 0 0 0;
 }
 
 @mixin preview_tiptap_hr {
@@ -110,7 +101,6 @@
 }
 
 @mixin preview_tiptap_ol {
-    margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
     li {

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -75,16 +75,6 @@
       margin-top: 0;
     }
 
-    h4,
-    h5,
-    h6,
-    ul,
-    ol,
-    blockquote,
-    p {
-      margin: 1rem 0 0 0;
-    }
-
     code {
       @include preview_tiptap_code;
     }

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,10 +140,14 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
+  const errorId = error ? `${id}-error` : undefined
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        aria-describedby={errorId}
+        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -202,16 +206,20 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
-        <Caption
-            className="pb_text_input_kit_label"
-            text={label}
-        />
-      }
+      {label && (
+        <label htmlFor={id}>
+          <Caption className="pb_text_input_kit_label" 
+              text={label} 
+          />
+        </label>
+      )}
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
+            aria={{ atomic: "true", live: "polite" }}
+            htmlOptions={{ role: "alert" }}
+            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,23 +9,27 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name"
+  placeholder: "Enter last name",
+  id: "last-name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number"
+    placeholder: "Enter phone number",
+    id: "phone"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address"
+    placeholder: "Enter email address",
+    id: "email"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code"
+    placeholder: "Enter zip code",
+    id: "zip"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
+          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md

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

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,6 +1,8 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
+  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -15,7 +17,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if 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" }}) if object.error %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -64,10 +64,16 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
+      def error_id
+        "#{id}-error" if error.present?
+      end
+
     private
 
       def all_input_options
         {
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -53,8 +53,6 @@ type TypeaheadProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
-  required?: boolean,
-  validation?: { message: string },
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
   preserveSearchInput?: boolean,
@@ -96,16 +94,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   onChange,
   optionsByContext = {},
   searchContextSelector,
-  required = false,
-  validation,
   clearOnContextChange = false,
   preserveSearchInput = false, // Default to false to maintain backward compatibility
   ...props
 }: TypeaheadProps) => {
   // State to manage the input value when preserveSearchInput is true
   const [inputValue, setInputValue] = useState("")
-  // State to track if form has been submitted to control validation display for react rendered rails kit
-  const [formSubmitted, setFormSubmitted] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -141,7 +135,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const selectProps = {
     cacheOptions: true,
-    required,
     components: {
       Control,
       ClearIndicator,
@@ -177,27 +170,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const [contextValue, setContextValue] = useState("")
 
-  // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
-  useEffect(() => {
-    const handleInvalid = (event: Event) => {
-      const target = event.target as HTMLInputElement
-      const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
-
-      if (typeaheadContainer) {
-        // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
-        const invalidInputName = target.name || target.getAttribute('name')
-        if (invalidInputName === name) {
-          setFormSubmitted(true)
-        }
-      }
-    }
-    document.addEventListener('invalid', handleInvalid, true)
-    
-    return () => {
-      document.removeEventListener('invalid', handleInvalid, true)
-    }
-  }, [name])
-
   // Add listener for clearing
   useEffect(() => {
     const handleClear = () => {
@@ -258,11 +230,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     }
 
-    // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
-    if (action === 'select-option') {
-      setFormSubmitted(false)
-    }
-
     // If a value is selected and we're preserving input on blur, clear the input
     if (action === 'select-option' && preserveSearchInput) {
       setInputValue('')
@@ -301,11 +268,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const inlineClass = selectProps.inline ? 'inline' : null
 
-  const shouldShowValidationError = required && 
-                                   formSubmitted
-
-  const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
-
   return (
     <div
         {...dataProps}
@@ -314,7 +276,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     >
       <Tag
           classNamePrefix="typeahead-kit-select"
-          error={errorDisplay}
+          error={error}
           isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -101,8 +101,6 @@ module Playbook
           plusIcon: plus_icon,
           truncate: truncate,
           wrapped: wrapped,
-          required: required,
-          validation: validation,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,