playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx

@@ -3,92 +3,94 @@ import React from "react"
 import Table from "../_table"
 
 const TableSticky = (props) => (
-  <Table
-      sticky
-      {...props}
-  >
-    <thead>
-      <tr>
-        <th>{'Column 1'}</th>
-        <th>{'Column 2'}</th>
-        <th>{'Column 3'}</th>
-        <th>{'Column 4'}</th>
-        <th>{'Column 5'}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-    </tbody>
-  </Table>
+  <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <Table
+        sticky
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  </div>
 )
 
 export default TableSticky

data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md

@@ -2,7 +2,9 @@ React: Use `sticky` on a table to allow the table header to be fixed in place wh
 
 Rails: Pass `sticky: true` to props.
 
-If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
+The live example uses a scroll container so sticky behavior is visible in the docs. Scroll inside the preview to see it.
+
+If the table header is not sticking in the right place you will need to pass an inline `top` style to the `thead`. This is often needed when a parent adds padding above the table.
 React Example: `<thead style={{ top: "-16px" }}>`
 Rails Example: `<thead style="top: -16px">`
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md

@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
 <% end %>
 ```
 
-For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
+For Nitro apps that use a shared search/filter pattern, reference the [example on Alpha](https://github.com/powerhome/nitro-web/pull/56859/changes/aa2afcdc97d39d74beb65cf53eb3bb2517eb2181) for implementation details.

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

@@ -100,6 +100,29 @@
         color: $input_text_disabled_dark;
       }
     }
+
+    .text_input_wrapper_add_on {
+      &:has(input:disabled),
+      &:has(.text_input:disabled) {
+        .add-on-card,
+        .add-on-card-dark {
+          border-color: $input_border_disabled_dark;
+          background-color: $input_background_disabled_dark;
+        }
+
+        .add-on-icon {
+          color: $input_text_disabled_dark;
+        }
+
+        .text_input:focus ~ .add-on-card-dark,
+        input:focus ~ .add-on-card-dark {
+          background-color: $input_background_disabled_dark;
+          border-color: $input_border_disabled_dark;
+          border-width: 1px;
+        }
+      }
+    }
+
     &.error {
       .text_input_wrapper {
         // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
@@ -192,6 +215,20 @@
       }
     }
   }
+  &:not(.dark) .text_input_wrapper_add_on {
+    &:has(input:disabled),
+    &:has(.text_input:disabled) {
+      .add-on-card {
+        border-color: $input_border_disabled;
+        background-color: $input_background_disabled;
+      }
+
+      .add-on-icon {
+        color: $input_text_disabled;
+      }
+    }
+  }
+
   &.inline {
     .text_input_wrapper input::placeholder,
     .text_input_wrapper .text_input .placeholder {

data/app/pb_kits/playbook/pb_title/docs/_playground.json

@@ -4,11 +4,12 @@
   "defaults": {
     "bold": true,
     "size": 3,
-    "tag": "h3"
+    "tag": "h3",
+    "text": "Title"
   },
   "children": {
     "editable": true,
-    "default": "Section heading",
+    "default": "Title",
     "hideWhenPropSet": [
       "text"
     ]
@@ -34,47 +35,95 @@
   ],
   "presets": [
     {
-      "name": "Page title",
+      "name": "Default",
+      "props": {
+        "size": 3,
+        "tag": "h3",
+        "text": "Section heading"
+      }
+    },
+    {
+      "name": "Title 1",
       "props": {
         "size": 1,
-        "tag": "h1"
-      },
-      "children": "Customer insights dashboard"
+        "tag": "h1",
+        "text": "Customer insights dashboard"
+      }
     },
     {
-      "name": "Section",
+      "name": "Title 4",
       "props": {
-        "size": 3,
-        "tag": "h3"
-      },
-      "children": "Recent activity"
+        "size": 4,
+        "text": "Title 4"
+      }
     },
     {
-      "name": "Subtitle",
+      "name": "Subtle title",
       "props": {
         "size": 4,
         "bold": false,
-        "tag": "h4"
-      },
-      "children": "Last updated 2 hours ago"
+        "tag": "h4",
+        "text": "Last updated 2 hours ago"
+      }
     },
     {
-      "name": "Success",
+      "name": "Success state",
       "props": {
         "color": "success",
-        "size": 3
-      },
-      "children": "Payment confirmed"
+        "size": 3,
+        "text": "Payment confirmed"
+      }
     },
     {
       "name": "Display size",
       "props": {
         "displaySize": "lg",
-        "tag": "h2"
-      },
-      "children": "Hero headline"
+        "tag": "h1",
+        "text": "Hero headline"
+      }
+    },
+    {
+      "name": "Link title",
+      "props": {
+        "variant": "link",
+        "color": "link",
+        "size": 3,
+        "tag": "h3",
+        "text": "View all invoices"
+      }
+    },
+    {
+      "name": "Light weight",
+      "props": {
+        "bold": false,
+        "size": 2,
+        "tag": "h2",
+        "text": "Lightweight heading"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "display_size_info": {
+      "when": {
+        "displaySize": "lg"
+      },
+      "message": "displaySize gives you oversized display typography while the tag still controls document semantics.",
+      "type": "info"
+    },
+    "link_variant_info": {
+      "when": {
+        "variant": "link"
+      },
+      "message": "variant=\"link\" styles Title like an interactive heading. Use tag to keep the right semantic level.",
+      "type": "info"
+    },
+    "light_weight_info": {
+      "when": {
+        "bold": false
+      },
+      "message": "Turn bold off for lighter subheadings, timestamps, and supporting section labels.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/docs/_playground.overrides.json

@@ -1,6 +1,12 @@
 {
   "children": {
-    "default": "Section heading"
+    "default": "Title"
+  },
+  "defaults": {
+    "bold": true,
+    "size": 3,
+    "tag": "h3",
+    "text": "Title"
   },
   "groups": [
     {
@@ -14,31 +20,89 @@
   ],
   "presets": [
     {
-      "name": "Page title",
-      "props": { "size": 1, "tag": "h1" },
-      "children": "Customer insights dashboard"
+      "name": "Default",
+      "props": {
+        "size": 3,
+        "tag": "h3",
+        "text": "Section heading"
+      }
+    },
+    {
+      "name": "Title 1",
+      "props": {
+        "size": 1,
+        "tag": "h1",
+        "text": "Customer insights dashboard"
+      }
     },
     {
-      "name": "Section",
-      "props": { "size": 3, "tag": "h3" },
-      "children": "Recent activity"
+      "name": "Title 4",
+      "props": {
+        "size": 4,
+        "text": "Title 4"
+      }
     },
     {
-      "name": "Subtitle",
-      "props": { "size": 4, "bold": false, "tag": "h4" },
-      "children": "Last updated 2 hours ago"
+      "name": "Subtle title",
+      "props": {
+        "size": 4,
+        "bold": false,
+        "tag": "h4",
+        "text": "Last updated 2 hours ago"
+      }
     },
     {
-      "name": "Success",
-      "props": { "color": "success", "size": 3 },
-      "children": "Payment confirmed"
+      "name": "Success state",
+      "props": {
+        "color": "success",
+        "size": 3,
+        "text": "Payment confirmed"
+      }
     },
     {
       "name": "Display size",
-      "props": { "displaySize": "lg", "tag": "h2" },
-      "children": "Hero headline"
+      "props": {
+        "displaySize": "lg",
+        "tag": "h1",
+        "text": "Hero headline"
+      }
+    },
+    {
+      "name": "Link title",
+      "props": {
+        "variant": "link",
+        "color": "link",
+        "size": 3,
+        "tag": "h3",
+        "text": "View all invoices"
+      }
+    },
+    {
+      "name": "Light weight",
+      "props": {
+        "bold": false,
+        "size": 2,
+        "tag": "h2",
+        "text": "Lightweight heading"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "display_size_info": {
+      "when": { "displaySize": "lg" },
+      "message": "displaySize gives you oversized display typography while the tag still controls document semantics.",
+      "type": "info"
+    },
+    "link_variant_info": {
+      "when": { "variant": "link" },
+      "message": "variant=\"link\" styles Title like an interactive heading. Use tag to keep the right semantic level.",
+      "type": "info"
+    },
+    "light_weight_info": {
+      "when": { "bold": false },
+      "message": "Turn bold off for lighter subheadings, timestamps, and supporting section labels.",
+      "type": "info"
+    }
+  }
 }