playbook_ui_docs 15.1.0.pre.alpha.typeaheadscss11143 → 15.1.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b93166dff297b319ca65e5ae1af11a53cc5e4f5e1e67b0e28e3fe6577ef4c05
-  data.tar.gz: b17f4568da3d24f348a08c2db531959dbfbfea6fa645dcd2d99b629c5d36f00f
+  metadata.gz: '063099822b8cd18873034e0f095b2ecc14e28cc22ddfdde5f48889bdc8bf43ad'
+  data.tar.gz: 03c384a25cac55c0cf2556875b8bccb74d97288f07cd0198780243796930702d
 SHA512:
-  metadata.gz: 2e238cea27fd54b8e31551b3533b93119f69de5f8fef9cf99ebf1688a46851b94cc96def33106f8ddf9e35a9ac96a890aa5dbc0a68aba5a1ddf24f0e9edf762c
-  data.tar.gz: c5c8762e91d29f9fd4d627fcef2e426b72e72818838adb12d4d41de9559b5e019a3e67014bacfbe5557bbb1db00c3eeac54714480ae0baf318e9cf6537e142f3
+  metadata.gz: 214e2079545f2446f1133ac8ee7f021cb544a903db7e67a50fbcf18cb4d3f9c0ddb656d0abeeb0f33d283e15972b10dbf73f0f3af5980769a45ec82b6108bceb
+  data.tar.gz: f3a1e96252c75ac98c55a6601d4b172ce0775e399537844543799442cea899868efc7dd2ed15d417469fc7cf1794a3fc84f4c9aa41dccc63bdf5093d353c2b10

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -44,9 +44,9 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-
+  
   const tableProps = {
-    verticalBorder: true,
+    verticalBorder: true
   }
 
   return (

data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -4,6 +4,7 @@ examples:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
+  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -11,8 +11,6 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
-  - button_managed_disabled: Button Toggle Disabled State
-  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,9 +4,6 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
-<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
-  Right Side Position & Product 5 Highlight Color
-<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
-      <Card
-          {...props}
-          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
-          marginBottom="sm"
-      >
-        {'Right Side Position & Product 5 Highlight Color'}
-      </Card>
-
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "wrong-phone",
-  contact_value: "2124396666",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "extension",
-  contact_value: "1233",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -28,21 +28,6 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
-      <Contact
-          contactType="wrong-phone"
-          contactValue="2124396666"
-          {...props}
-      />
-      <Contact
-          contactType='extension'
-          contactValue="1234"
-          {...props}
-      />
-      <Contact
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -26,9 +26,3 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-  contact_detail: "International",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -33,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

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", variant: "danger", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", 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,7 +93,6 @@ 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", variant: "danger" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
             <%= 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,7 +152,6 @@ 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.html.erb

@@ -91,7 +91,6 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

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",
@@ -98,8 +89,6 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= 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.typeahead :example_typeahead_validation_react, 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_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= 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_nav/docs/example.yml

@@ -17,7 +17,6 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
-  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -43,7 +42,6 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
-  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -19,5 +19,4 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
 export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
-export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<script>
-    window.addEventListener("load", () => {   
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
-        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
       const editorElement = editorContainer?.querySelector('trix-editor')
       const inputId = editorElement?.getAttribute('input')

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,27 +11,4 @@
             padding_right: "xs" 
         }) %>
     <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
-    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
-        <%= pb_rails("card", props: {
-            border_radius: "rounded",
-            justify_content: "center",
-            padding: "none"
-        })  do %>
-            <%= pb_rails("caption", props: {
-                text: "TODAY",
-                size: "xs",
-                padding_left: "xs",
-                padding_right: "xs" 
-            }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,25 +2,8 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
 
-const childrenHorizontal = (
-    <Card
-        borderRadius="rounded"
-        justifyContent="center"
-        padding="none"
-    >
-        <Caption
-            paddingLeft="xs"
-            paddingRight="xs"
-            size="xs"
-            text="TODAY"
-        />
-    </Card>
-)
-
-const childrenVertical = (
+const children = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -37,33 +20,12 @@ const childrenVertical = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <>
-            <SectionSeparator
-                {...props}
-                lineStyle='dashed'
-            >
-                {childrenHorizontal}
-            </SectionSeparator>
-            <Flex
-                inline="flex-container"
-                marginTop="lg"
-                vertical="stretch"
-            >
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-                    <SectionSeparator
-                        orientation="vertical"
-                        {...props}
-                    >
-                        {childrenVertical}
-                    </SectionSeparator>
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-            </Flex>
-        </>
-        
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
     )
 }
 

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

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