playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav9708 → 14.25.0.pre.alpha.PLAY2369textinputautocompleteprop10269

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,
@@ -77,6 +76,7 @@ module Playbook
           name: mask.present? ? "" : name,
           pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
+          style: "cursor: #{cursor_style}",
           required: required,
           type: type,
           value: value,
@@ -84,6 +84,20 @@ module Playbook
         }.merge(input_options)
       end
 
+      def cursor_style
+        # If input is disabled, always use 'not-allowed'
+        return "not-allowed" if disabled
+
+        # If cursor prop is provided, convert it to kebab-case
+        if cursor.present?
+          # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
+          cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
+        else
+          # Default to 'pointer'
+          "pointer"
+        end
+      end
+
       def validation_message
         validation[:message] || ""
       end

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;
   }
-}
+}

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -4,16 +4,20 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-[class^=pb_time_kit] {
-  &[class*=_center]  {
-    text-align: center;
-  }
-
-  &[class*=_right]  {
-    text-align: right;
-  }
+.pb_time_kit,
+.pb_time_kit_left,
+.pb_time_kit_center,
+.pb_time_kit_right,
+.pb_time_kit_sm,
+.pb_time_kit_md,
+.pb_time_kit_left_sm,
+.pb_time_kit_left_md,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
 
-  [class^=pb_time_timezone] {
+  .pb_time_timezone {
     color: $text_lt_light;
     font-weight: $bold;
 
@@ -21,13 +25,36 @@
       content: " ";
     }
   }
+}
 
-  &[class*=dark] {
-    & * {
-      @include caption_dark;
-    }
-    .pb_time {
-      color: $text_dk_default;
-    }
-  }
+.pb_time_kit_center,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md {
+  text-align: center;
+}
+
+.pb_time_kit_right,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
+  text-align: right;
 }
+
+.pb_time_kit.dark,
+.pb_time_kit_left.dark,
+.pb_time_kit_center.dark,
+.pb_time_kit_right.dark,
+.pb_time_kit_sm.dark,
+.pb_time_kit_md.dark,
+.pb_time_kit_left_sm.dark,
+.pb_time_kit_left_md.dark,
+.pb_time_kit_center_sm.dark,
+.pb_time_kit_center_md.dark,
+.pb_time_kit_right_sm.dark,
+.pb_time_kit_right_md.dark {
+  & * {
+    @include caption_dark;
+  }
+  .pb_time {
+    color: $text_dk_default;
+  }
+}

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,35 +1,56 @@
 
-[class^=pb_time_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: center;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: center;
-    }
-  }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: right;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: flex-end;
-    }
-  }
-  [class^=pb_time_range_inline_wrapper] {
+@import "../tokens/spacing";
+
+// Base time range inline classes
+.pb_time_range_inline_kit_left,
+.pb_time_range_inline_kit_center,
+.pb_time_range_inline_kit_right,
+.pb_time_range_inline_kit_vertical {
+  .pb_time_range_inline_wrapper {
     display: flex;
     align-items: center;
-    [class*=pb_time_range_inline_arrow] {
+    .pb_time_range_inline_arrow {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    [class*=pb_time_range_inline_timezone] {
+    .pb_time_range_inline_timezone {
       margin-left: $space_xs/2;
     }
-    [class*=pb_time_range_inline_icon] {
+    .pb_time_range_inline_icon {
       margin-right: $space_xs/2;
     }
   }
 }
+
+// Center alignment
+.pb_time_range_inline_kit_center {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
+}
+
+// Right alignment
+.pb_time_range_inline_kit_right {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: right;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: flex-end;
+  }
+}
+
+// Vertical alignment
+.pb_time_range_inline_kit_vertical {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
+}

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :timezone, default: false
 
       def classname
-        generate_classname("pb_time_range_inline_kit", dark_class, alignment)
+        generate_classname("pb_time_range_inline_kit", alignment)
       end
 
       def format_start_time_string

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss

@@ -2,15 +2,12 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
-[class^=pb_time_stacked_kit] {
- &[class*=_center]  {
-   text-align: center;
- }
-
- &[class*=_right]  {
-   text-align: right;
- }
+.pb_time_stacked_kit_center {
+  text-align: center;
+}
 
+.pb_time_stacked_kit_right {
+  text-align: right;
 }
 
 .time-spacing {

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,16 +1,22 @@
 @import "timestamp-mixins";
 @import "../tokens/colors";
 
-[class^=pb_timestamp_kit]{
+.pb_timestamp_kit_left,
+.pb_timestamp_kit_center,
+.pb_timestamp_kit_right {
   @include pb_timestamp;
+}
+
+.pb_timestamp_kit_center {
+  text-align: center;
+}
+
+.pb_timestamp_kit_right {
+  text-align: right;
+}
 
-  &[class*=_center]  {
-    text-align: center;
-  }
-  &[class*=_right]  {
-    text-align: right;
-  }
-  &[class*=_dark] {
-    color: $text_dk_default;
-  }
+.pb_timestamp_kit_left.dark,
+.pb_timestamp_kit_center.dark,
+.pb_timestamp_kit_right.dark {
+  color: $text_dk_default;
 }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -49,10 +49,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_timestamp_kit', align, {
-      dark: dark,
-      variant: variant,
-    }),
+    buildCss('pb_timestamp_kit', align),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -40,7 +40,7 @@ module Playbook
       SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
 
       def classname
-        generate_classname("pb_timestamp_kit", variant_class, align)
+        generate_classname("pb_timestamp_kit", align)
       end
 
       def timestamp_text

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -36,7 +36,7 @@ describe("Timestamp Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
+    expect(kit).toHaveClass("pb_timestamp_kit_left");
   });
 
   test("renders Timestamp time", () => {
@@ -79,7 +79,7 @@ describe("Timestamp Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
+    expect(kit).toHaveClass("pb_timestamp_kit_center");
   });
 
   test("renders Timestamp timezone", () => {