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

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

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
+
+
+const TextInputAutocomplete = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: "",
+    lastName: "",
+    phone: "",
+    emailTest: "",
+    email: "",
+  });
+
+  const handleOnChangeFormField = ({ target }) => {
+    const { name, value } = target;
+    setFormFields({ ...formFields, [name]: value });
+  };
+
+  return (
+    <div>
+      <TextInput
+          autoComplete={false}
+          label="autocomplete='off'"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+          {...props}
+      />
+      <TextInput
+          label="no autocomplete attribute (let browser decide- basically 'on')"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+          {...props}
+      />
+      <TextInput
+          autoComplete
+          label="autocomplete='on'"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+          {...props}
+      />
+      <Body marginBottom="sm">
+        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:
+      </Body>
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='email'"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+          {...props}
+      />
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='emailAlt'"
+          marginTop="sm"
+          name="emailTest"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.emailTest}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default TextInputAutocomplete;

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

@@ -0,0 +1 @@
+Set this prop to `false` or `"off"` to remove autocomplete from text inputs. You can also set it to a string, but browsers will often defer to other attributes like `name`. 

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

@@ -9,6 +9,8 @@ examples:
   - text_input_no_label: No Label
   - text_input_options: Input Options
   - text_input_mask: Mask
+  - text_input_autocomplete: Autocomplete
+  
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -19,6 +21,7 @@ examples:
   - text_input_no_label: No Label
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
+  - text_input_autocomplete: Autocomplete
 
 
   swift:

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

@@ -7,3 +7,4 @@ export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
+export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'

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

@@ -15,8 +15,7 @@ module Playbook
         "cvv" => '\d{3,4}',
       }.freeze
 
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: true
+      prop :autocomplete, default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -69,7 +68,7 @@ module Playbook
 
       def all_input_options
         {
-          autocomplete: autocomplete ? nil : "off",
+          autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
           disabled: disabled,

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -306,3 +306,41 @@ test('returns masked CVV value', () => {
 
   expect(input.value).toBe('')
 })
+
+test('adds autocomplete string attribute', () => {
+  render(
+    <TextInput
+        autoComplete="family-name"
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).toHaveAttribute("autocomplete", "family-name")
+})
+
+test('adds autocomplete "off" attribute', () => {
+  render(
+    <TextInput
+        autoComplete={false}
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).toHaveAttribute("autocomplete", "off")
+})
+
+test('does not add autocomplete attribute otherwise', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).not.toHaveAttribute("autocomplete")
+})

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -3,11 +3,11 @@
 @import "../tokens/spacing";
 @import "../tokens/titles";
 
-[class^=pb_textarea_kit] {
+.pb_textarea_kit {
   margin-bottom: $space_sm;
 
-  [class^=pb_caption_kit] {
-    margin-bottom: $space_xs;
+  .pb_caption_kit_md {
+    margin-bottom: $space_xs !important;
     display: block;
   }
   textarea::placeholder,
@@ -59,8 +59,8 @@
   }
 
   &.error {
-    [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+    .pb_body_kit_negative {
+      margin-top: $space_xs / 2 !important;
     }
     textarea {
       border-color: $error;
@@ -81,4 +81,4 @@
   .pb_caption_kit_xs {
     text-align: right;
   }
-}
+}