playbook_ui 15.1.0.pre.alpha.iconstatvaluescss10956 → 15.1.0.pre.alpha.multipleusersstackedscss11047

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 023dae1c06846305a2de70d79d36fac8bb6e685e9eed4da1157a84559d3749c6
-  data.tar.gz: f8154d1b04e55366e85ddf6f2a21d2e465d49ba40d6a456ddb43450307930e91
+  metadata.gz: 3357be552d2d97d78a0b5c06c4b55134e7aa060b8a73a4cfa77f7685b3c3535d
+  data.tar.gz: c193db4e1166324aed46b3aa82207d0c72c6de47a100940a176a2743bbcc40a9
 SHA512:
-  metadata.gz: d7fa8e2b752601706f4aa07fc61cb6c08280c21c315faf666ef054eac38a01e6e14e17fe5015de1d6c3734ba0fae3039b01223ab85a32a305166ca0bd06983e7
-  data.tar.gz: f61864e43078b05767ba7fc2335881b00ee99799b8731ca982e00a43fc952c5b085b5712626d66b410548f5b6e83bbaf200b2343bf6ef4f7aff8ee94b046e76d
+  metadata.gz: c522b63ef909ec5d224f123873ada1d90595a1437774f5bf5fc26e71181853d4022143062c706b87dfba324f59c554203d5987efa90c5319cf9c8890ad9cab52
+  data.tar.gz: 1ca144b57c65625a162efa758cfc43605aaa5eeee75fa44ab1f346b46805383636c1307a83269c45a0701955e9dbae1da6f6d109d974f4823d2eb90873fd63e6

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

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-} & GlobalProps
+}
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,45 +3,51 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-.pb_icon_stat_value_kit_horizontal,
-.pb_icon_stat_value_kit_vertical
- {
+[class^=pb_icon_stat_value_kit]{
   display: flex;
   align-items: baseline;
 
-  &.pb_icon_stat_value_kit_vertical {
+  &[class*=_vertical]  {
     flex-direction: column;
 
-    &.text_align_center {
+    &[class*=_center]  {
       align-items: center;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: center;
       }
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       align-items: flex-end;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: right;
       }
     }
+
+    [class^=pb_icon_circle] {
+      margin-bottom: $space-xs;
+    }
   }
 
-  &.pb_icon_stat_value_kit_horizontal {
+  &[class*=_horizontal]  {
     align-items: center;
 
-    &.text_align_center {
+    &[class*=_center]  {
       justify-content: center;
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       justify-content: flex-end;
     }
+
+    [class^=pb_icon_circle] {
+      margin-right: $space-sm;
+    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +33,8 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+    | "lighter",
+}
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -49,13 +50,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'default',
+    variant = 'lighter',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -100,8 +101,6 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
-          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
-          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,8 +3,6 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
-        margin_right: object.icon_margin_right,
-        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange],
-                     default: "default"
+                     values: %w[default royal blue purple teal red yellow green orange lighter],
+                     default: "lighter"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation)
+        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end
 
       def value_string
@@ -41,14 +41,6 @@ module Playbook
           3
         end
       end
-
-      def icon_margin_right
-        orientation === "horizontal" && "sm"
-      end
-
-      def icon_margin_bottom
-        orientation === "vertical" && "xs"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
     })
 
     test("renders icon", () => {
@@ -99,10 +99,9 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
+    
             const kit = screen.getByTestId(testId)
-            const title = kit.querySelector(".pb_title_kit")
-            expect(title).toHaveClass(`pb_title_${size}`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
 
             cleanup()
         })
@@ -116,7 +115,8 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green"].forEach(
+        "green",
+        "lighter"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,10 +128,9 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-
+    
             const kit = screen.getByTestId(testId)
-            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
-            expect(iconCircle).toBeInTheDocument()
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
 
             cleanup()
         }) 
@@ -150,7 +149,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
     })
 
 })

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,7 +89,18 @@ $positions: (
   }
 }
 
-[class^=pb_multiple_users_stacked_kit] {
+.pb_multiple_users_stacked_kit,
+.pb_multiple_users_stacked_kit_single,
+.pb_multiple_users_stacked_kit_bubble,
+.pb_multiple_users_stacked_kit_single_bubble,
+.pb_multiple_users_stacked_kit_bubble_size_sm,
+.pb_multiple_users_stacked_kit_bubble_size_md,
+.pb_multiple_users_stacked_kit_bubble_size_lg,
+.pb_multiple_users_stacked_kit_bubble_size_xl,
+.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+.pb_multiple_users_stacked_kit_single_bubble_size_md,
+.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+.pb_multiple_users_stacked_kit_single_bubble_size_xl {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -103,7 +114,8 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -117,10 +129,17 @@ $positions: (
       }
     }
   }
-  &[class*=_single] .pb_multiple_users_stacked_item {
+  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
+  .pb_avatar_kit_size_xs.second_item,
+  .pb_avatar_kit_size_md.second_item, 
+  .pb_badge_kit_primary_rounded.second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -143,7 +162,8 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &[class*=_bubble_][class*=_size_#{$size_name}] {
+      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
+      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -161,7 +181,8 @@ $positions: (
           background-color: $card_dark;
         }
   
-        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -175,7 +196,8 @@ $positions: (
           }
         }
   
-        [class^=pb_avatar_kit] {
+        .pb_avatar_kit_size_xs,
+        .pb_avatar_kit_size_md {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -235,8 +257,13 @@ $positions: (
           }
         }
         
-        &[class*=_single_bubble] {
-          [class^=pb_avatar_kit].first_item {
+        &.pb_multiple_users_stacked_kit_single_bubble,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+          .pb_avatar_kit_size_xs.first_item,
+          .pb_avatar_kit_size_md.first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }

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"
 }) %>