playbook_ui 14.26.0.pre.rc.0 → 15.0.0.pre.alpha.PLAY1981sectionseparatorverticalchildren10469

data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js

@@ -0,0 +1,165 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import SectionSeparator from './_section_separator'
+
+const testId = "section-separator-kit"
+
+describe("Section Separator Kit", () => {
+    test("renders basic section separator with default props", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders with text prop", () => {
+        const text = "Section Title"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                text={text}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const textElement = screen.getByText(text)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit")
+        expect(textElement).toBeInTheDocument()
+    })
+
+    test("renders with children", () => {
+        const childText = "Custom Content"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+            >
+                <span>{childText}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(childText)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit")
+        expect(childElement).toBeInTheDocument()
+    })
+
+    test("renders vertical orientation", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                orientation="vertical"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders background variant", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                variant="background"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders dashed line style", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                lineStyle="dashed"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_dashed pb_section_separator_color_default")
+    })
+
+    test("renders primary color", () => {
+        render(
+            <SectionSeparator
+                color="primary"
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_primary")
+    })
+
+    test("renders dark mode", () => {
+        render(
+            <SectionSeparator
+                dark
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders with custom className", () => {
+        const customClass = "custom-class"
+        render(
+            <SectionSeparator
+                className={customClass}
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default custom-class")
+    })
+
+    test("renders vertical with children", () => {
+        const childText = "Vertical Content"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                orientation="vertical"
+            >
+                <span>{childText}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(childText)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
+        expect(childElement).toBeInTheDocument()
+    })
+
+    test("renders all props combined", () => {
+        const text = "Combined Props"
+        render(
+            <SectionSeparator
+                color="primary"
+                dark
+                data={{ testid: testId }}
+                lineStyle="dashed"
+                orientation="vertical"
+                variant="background"
+            >
+                <span>{text}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(text)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_vertical pb_section_separator_dashed pb_section_separator_color_primary")
+        expect(childElement).toBeInTheDocument()
+    })
+})

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,7 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_select] {
+.pb_select {
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -80,7 +80,7 @@
     position: relative;
     display: block;
     &.error {
-      [class*=pb_body_kit] {
+      > .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       > select:first-child {
@@ -157,7 +157,7 @@
   }
 }
 
-[class^=pb_select].dark {
+.pb_select.dark {
   select {
     @include pb_textarea_dark;
     @include pb_body_light_dark;
@@ -260,4 +260,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,11 @@ $pb_selectable_paddings: (
   py: ("padding-top", "padding-bottom")
 );
 
-[class^=pb_selectable_card_kit] {
+.pb_selectable_card_kit,
+.pb_selectable_card_kit_checked_disabled,
+.pb_selectable_card_kit_checked_enabled,
+.pb_selectable_card_kit_disabled,
+.pb_selectable_card_kit_enabled {
   display: block;
   margin-bottom: 0;
 
@@ -212,4 +216,4 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -1,9 +1,13 @@
-[class^=pb_selectable_card_icon_kit] {
+.pb_selectable_card_icon_kit,
+.pb_selectable_card_icon_kit_checked_disabled,
+.pb_selectable_card_icon_kit_checked_enabled,
+.pb_selectable_card_icon_kit_disabled,
+.pb_selectable_card_icon_kit_enabled {
 
 	text-align: center;
 	user-select: none;
 
-  .buffer > [class*=pb_selectable_icon_kit]::before {
+  .buffer > .pb_selectable_icon_kit::before {
     content: '';
     position: absolute;
     width: 100%;
@@ -12,7 +16,7 @@
     left: 0;
   }
 
-  .buffer > [class*=pb_selectable_icon_kit] {
+  .buffer > .pb_selectable_icon_kit {
     @media (hover:hover) {
       &:hover * {
             transition: transform $transition_short ease;
@@ -42,7 +46,8 @@
       }
     }
 
-    &[class*=_disabled] {
+    &.pb_selectable_card_icon_kit_disabled,
+    &.pb_selectable_card_icon_kit_checked_disabled {
       opacity: $opacity_6;
       cursor: not-allowed;
 
@@ -79,15 +84,19 @@
     }
   }
 
-  [class^=pb_selectable_icon_kit] {
+  .pb_selectable_icon_kit {
     margin-bottom: 0px;
   }
 
-  [class^=pb_body_kit_light] {
+  .pb_body_kit_light {
     margin-top: $space_xs;
   }
 
-  [class^=pb_selectable_card_kit] {
+  .pb_selectable_card_kit,
+  .pb_selectable_card_kit_checked_disabled,
+  .pb_selectable_card_kit_checked_enabled,
+  .pb_selectable_card_kit_disabled,
+  .pb_selectable_card_kit_enabled {
     margin-bottom: 0px !important;
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,6 +1,11 @@
 @import "../tokens/transition";
 
-[class^=pb_selectable_icon] {
+.pb_selectable_icon_kit,
+.pb_selectable_icon_kit_checked,
+.pb_selectable_icon_kit_enabled,
+.pb_selectable_icon_kit_disabled,
+.pb_selectable_icon_kit_checked_enabled,
+.pb_selectable_icon_kit_checked_disabled {
 
 	text-align: center;
 	cursor: pointer;
@@ -27,14 +32,6 @@
 		transition: color $transition_short ease;
 	}
 
-	&[class*=_disabled] {
-		opacity: $opacity_6;
-		cursor: not-allowed;
-		* {
-			cursor: not-allowed;
-		}
-	}
-	
 	input[type="checkbox"],
 	input[type="radio"] {
 		-webkit-appearance: none;
@@ -54,33 +51,46 @@
 
 		}
 	}
+}
 
+.pb_selectable_icon_kit_disabled,
+.pb_selectable_icon_kit_checked_disabled {
+	opacity: $opacity_6;
+	cursor: not-allowed;
+	* {
+		cursor: not-allowed;
+	}
+}
 
-	&.dark {
-		input[type="checkbox"],
-		input[type="radio"] {
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			display: none;
-			appearance: none;
+.pb_selectable_icon_kit.dark,
+.pb_selectable_icon_kit_checked.dark,
+.pb_selectable_icon_kit_enabled.dark,
+.pb_selectable_icon_kit_disabled.dark,
+.pb_selectable_icon_kit_checked_enabled.dark,
+.pb_selectable_icon_kit_checked_disabled.dark {
+	input[type="checkbox"],
+	input[type="radio"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		display: none;
+		appearance: none;
+		transition: color $transition_short ease;
+		
+		&:checked ~ label * {
 			transition: color $transition_short ease;
+			color: $active_dark !important;
+		}
 			
-			&:checked ~ label * {
-				transition: color $transition_short ease;
-				color: $active_dark !important;
-			}
-				
-			&:not(:checked) ~ label {
-				transition: color $transition_short ease;
-				color: $text_dk_lighter;
+		&:not(:checked) ~ label {
+			transition: color $transition_short ease;
+			color: $text_dk_lighter;
 
-				h4 {
-					transition: color $transition_short ease;
-					color: $text_dk_default;
-				}
+			h4 {
+				transition: color $transition_short ease;
+				color: $text_dk_default;
 			}
 		}
- 	}
+	}
 }
 
 

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -82,6 +82,7 @@ const SelectableListItem = ({
             <Checkbox
                 checked={checkedState}
                 id={id}
+                marginLeft="xs"
                 name={name}
                 onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
@@ -98,6 +99,7 @@ const SelectableListItem = ({
         {variant == "radio" && (
           <>
             <Radio
+                className="ml_xs"
                 defaultChecked={defaultChecked}
                 id={id}
                 label={label}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -1,20 +1,17 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_selectable_list]{
+.pb_selectable_list_kit {
   margin-bottom: 0px;
-  [class^=pb_item_kit] {
+  
+  .pb_item_kit,
+  .pb_item_kit_checked_item {
     &:hover {
       background-color: $bg_light;
     }
-    &[class*=checked_item] {
-      background-color: $active_light;
-    }
-  }
-  [class^=pb_radio_kit] {
-    margin-left: $space_xs;
   }
-  [class^=pb_checkbox_kit] {
-    margin-left: $space_xs;
+
+  .checked_item {
+    background-color: $active_light;
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js

@@ -35,7 +35,6 @@ const SelectableListRadio = () => {
             value="1"
         />
         <SelectableList.Item
-            defaultChecked
             label="Medium"
             name="radio"
             value="2"
@@ -62,7 +61,7 @@ test("renders variant checkbox", () => {
 test("renders variant radio", () => {
     render(<SelectableListRadio />)
     const kit = screen.getByTestId("selectable-list-test")
-    const checkbox = kit.querySelector(".pb_radio_kit")
-    expect(checkbox).toBeInTheDocument()
+    const radio = kit.querySelector("input[type='radio']")
+    expect(radio).toBeInTheDocument()
 
 })

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -12,12 +12,12 @@
     </span>
   <% end %>
   <% if object.variant == "radio"%>
-    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <%= pb_rails("radio", props: { margin_left:"xs", text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
       <%= content %>
     <% end %>
   <% else %>
-    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <%= pb_rails("checkbox", props: { margin_left:"xs", text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
       <%= content %>
     <% end %>

data/app/pb_kits/playbook/pb_source/_source.scss

@@ -1,29 +1,29 @@
 @import "../tokens/spacing";
 
-[class^=pb_source] {
-  [class^=pb__source_layout] {
+.pb_source_kit {
+  .pb__source_layout {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
   }
 
-  [class^=pb_icon_circle],
-  [class^=pb_avatar] {
+  .pb_icon_circle_kit_size_sm_default,
+  .pb_avatar_kit_size_sm {
     margin-right: $space-sm;
   }
 
-  [class^=pb__source_content] {
+  .pb__source_content {
     display: block;
     flex-grow: 1;
 
-    [class^=pb__source_value] {
+    .pb__source_value {
       display: flex;
       justify-content: flex-start;
       align-items: baseline;
 
-      [class^=pb_body] {
+      .pb_body_kit {
         margin-right: $space-xs;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 
-[class*=pb_star_rating_kit] {
+.pb_star_rating_kit {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -65,7 +65,7 @@ describe("Star Rating Kit", () => {
     const stars = highlight.querySelectorAll(".pb_star_lg")
     const count = stars.length
 
-    expect(title.className).toBe("pb_title_kit_size_2_light_thin pr_sm pb_star_rating_number_lg")
+    expect(title.className).toBe("pb_title_kit pb_title_2 pb_title_light pb_title_thin pr_sm pb_star_rating_number_lg")
     expect(count).toBe(5)
   })
 })

data/app/pb_kits/playbook/pb_stat_value/_stat_value.scss

@@ -1,7 +1,7 @@
 @import "../pb_title/title";
 
-[class^=pb_stat_value_kit]{
-  [class^=pb_stat_value_wrapper] {
+.pb_stat_value_kit {
+  .pb_stat_value_wrapper {
     display: flex;
     justify-content: flex-start;
     align-items: baseline;

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

@@ -2,7 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
 
-[class^="pb_text_input_kit"] {
+.pb_text_input_kit {
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
@@ -76,7 +76,7 @@
         .text_input {
           border-color: $error_dark;
         }
-        [class*=pb_body_kit_negative] {
+        .pb_body_kit_negative {
           color: $error_dark;
         }
       }
@@ -100,7 +100,7 @@
   }
   &.error {
     .text_input_wrapper {
-      [class*="pb_body_kit"] {
+      .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
@@ -174,9 +174,9 @@
   }
 
   .text_input_wrapper_add_on {
-    & > [class^="pb_text_input_kit"]:not(:last-child) {
+    & > .pb_text_input_kit:not(:last-child) {
       .text_input_wrapper_add_on input,
-      [class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
+      .pb_text_input_kit .text_input_wrapper_add_on .text_input {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
         border-right-width: 0;

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

@@ -36,6 +36,7 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
+  autoComplete?: boolean | string,
 } & GlobalProps
 
 const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
@@ -59,6 +60,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
+    autoComplete = true,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -142,6 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
         id={id}

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

@@ -0,0 +1,41 @@
+<%= pb_rails("text_input", props: {
+  autocomplete: false,
+  label: "autocomplete='off'",
+  name: "firstName",
+  placeholder: "Enter first name",
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "no autocomplete attribute (let browser decide- basically 'on')",
+  name: "lastName",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: true,
+    label: "autocomplete='on'",
+    name: "phone",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("body", props: { margin_bottom: "sm" }) do %>
+  The following have the same autocomplete attributes (email), but have
+  different name attributes (email and emailAlt). Many browsers will
+  open autocomplete based on name attributes instead of autocomplete:
+<% end %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='email'",
+    name: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='emailAlt'",
+    name: "emailAlt",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>