playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav10273 → 14.25.0.pre.alpha.PLAY2369textinputautocompleteprop9970

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

@@ -2,7 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
 
-.pb_text_input_kit {
+[class^="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;
         }
-        .pb_body_kit_negative {
+        [class*=pb_body_kit_negative] {
           color: $error_dark;
         }
       }
@@ -100,7 +100,7 @@
   }
   &.error {
     .text_input_wrapper {
-      .pb_body_kit_negative {
+      [class*="pb_body_kit"] {
         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 {
-    & > .pb_text_input_kit:not(:last-child) {
+    & > [class^="pb_text_input_kit"]:not(:last-child) {
       .text_input_wrapper_add_on input,
-      .pb_text_input_kit .text_input_wrapper_add_on .text_input {
+      [class^="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/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";
 
-.pb_textarea_kit {
+[class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
 
-  .pb_caption_kit_md {
-    margin-bottom: $space_xs !important;
+  [class^=pb_caption_kit] {
+    margin-bottom: $space_xs;
     display: block;
   }
   textarea::placeholder,
@@ -59,8 +59,8 @@
   }
 
   &.error {
-    .pb_body_kit_negative {
-      margin-top: $space_xs / 2 !important;
+    [class*=pb_body_kit] {
+      margin-top: $space_xs / 2;
     }
     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,20 +4,16 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-.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_kit] {
+  &[class*=_center]  {
+    text-align: center;
+  }
+
+  &[class*=_right]  {
+    text-align: right;
+  }
 
-  .pb_time_timezone {
+  [class^=pb_time_timezone] {
     color: $text_lt_light;
     font-weight: $bold;
 
@@ -25,36 +21,13 @@
       content: " ";
     }
   }
-}
-
-.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;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
+    }
+    .pb_time {
+      color: $text_dk_default;
+    }
   }
-}
+}

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

@@ -1,56 +1,35 @@
 
-@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 {
+[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] {
     display: flex;
     align-items: center;
-    .pb_time_range_inline_arrow {
+    [class*=pb_time_range_inline_arrow] {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    .pb_time_range_inline_timezone {
+    [class*=pb_time_range_inline_timezone] {
       margin-left: $space_xs/2;
     }
-    .pb_time_range_inline_icon {
+    [class*=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", alignment)
+        generate_classname("pb_time_range_inline_kit", dark_class, alignment)
       end
 
       def format_start_time_string

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

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

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

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

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

@@ -49,7 +49,10 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_timestamp_kit', align),
+    buildCss('pb_timestamp_kit', align, {
+      dark: dark,
+      variant: variant,
+    }),
     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", align)
+        generate_classname("pb_timestamp_kit", variant_class, 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");
+    expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
   });
 
   test("renders Timestamp time", () => {
@@ -79,7 +79,7 @@ describe("Timestamp Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass("pb_timestamp_kit_center");
+    expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
   });
 
   test("renders Timestamp timezone", () => {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,78 +1,73 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
-@import "../tokens/typography";
 @import "../tokens/screen_sizes";
 @import './title_mixin';
 
-.pb_title_kit {
-  // Base title styles - default to title 3 styling
-  @include pb_title_3;
-  @include pb_title_bold;
-  
-  // Size-based styles (these will override the base)
-  &.pb_title_1 {
+[class^=pb_title_kit] {
+  &[class*=_1] {
     @include pb_title_1;
+    @include title_colors;
     @include pb_title_bold;
   }
 
-  &.pb_title_2 {
+  &[class*=_2] {
     @include pb_title_2;
+    @include title_colors;
     @include pb_title_bold;
   }
 
-  &.pb_title_3 {
+  &[class*=_3] {
     @include pb_title_3;
+    @include title_colors;
     @include pb_title_bold;
   }
 
-  &.pb_title_4 {
+  &[class*=_4] {
     @include pb_title_4;
+    @include title_colors;
   }
 
-  &.pb_title_thin {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 
-  // Color classes
-  @include title_colors;
-
-  // Display sizes
-  &.pb_title_display {
+  &[class*=_display] {
     font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
-    font-weight: $bold;
-  }
-
-  // Dynamic sizes
-  &.pb_title_dynamic_xs {
-    font-size: min(2vw, 80vw / 16); 
-  }
-
-  &.pb_title_dynamic_sm {
-    font-size: min(2.5vw, 96vw / 16); 
   }
 
-  &.pb_title_dynamic_md {
-    font-size: min(4vw, 160vw / 16);
-  }
-
-  &.pb_title_dynamic_lg {
-    font-size: min(5vw, 192vw / 16);
-  }
-
-  &.pb_title_dynamic_xl {
-    font-size: min(6vw, 224vw / 16);
+  &[class*=_dynamic] {
+    &[class*=_xs] {
+      font-size: min(2vw, 80vw / 16); 
+    }
+  
+    &[class*=_sm] {
+      font-size: min(2.5vw, 96vw / 16); 
+    }
+  
+    &[class*=_md] {
+      font-size: min(4vw, 160vw / 16);
+    }
+  
+    &[class*=_lg] {
+      font-size: min(5vw, 192vw / 16);
+    }
+  
+    &[class*=_xl] {
+      font-size: min(6vw, 224vw / 16);
+    }
+  
+    &[class*=_xxl] {
+      font-size: min(8vw, 256vw / 16);
+    }
   }
+  
 
-  &.pb_title_dynamic_xxl {
-    font-size: min(8vw, 256vw / 16);
-  }
 
-  // Responsive breakpoint classes
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");
       $max_size: map-get($size_value, "max");
-      &.pb_title_#{$size}_#{$title_size_value} {
+      &[class*=_#{$size}_#{$title_size_value}] {
         @include break_on($min_size, $max_size) {
           @if $title_size_value == 1 { @include pb_title_1; }
           @else if $title_size_value == 2 { @include pb_title_2; }
@@ -88,9 +83,9 @@
   &.dark {
     @include title_dark;
     @each $name, $color in $pb_dark_title_colors {
-      &.pb_title_#{$name} {
+      &[class*="_#{$name}"] {
         color: $color;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -43,41 +43,32 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const getBold = bold ? '' : 'thin'
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
-    const classes: string[] = []
+    let css = ''
 
     if (!isSizeNumberOrString) {
       Object.entries(size).forEach((sizeObj) => {
-        classes.push(`pb_title_${sizeObj[0]}_${sizeObj[1]}`)
+        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
       })
     }
 
-    return classes
+    return css.trim()
   }
 
   const buildDisplaySize = () => {
     if (displaySize) {
-      return [`pb_title_dynamic_${displaySize}`]
+      return `pb_title_kit_dynamic_${displaySize}`
     }
-    return []
   }
 
-  const titleClasses = ['pb_title_kit']
-  
-  if (isSizeNumberOrString) {
-    titleClasses.push(`pb_title_${size}`)
-  }
-  if (variant) titleClasses.push(`pb_title_${variant}`)
-  if (color) titleClasses.push(`pb_title_${color}`)
-  if (!bold) titleClasses.push('pb_title_thin')
-  titleClasses.push(...buildDisplaySize())
-  titleClasses.push(...buildResponsiveSizeCss())
-
   const classes = classnames(
-    titleClasses.join(' '),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildDisplaySize(),
+    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -20,7 +20,7 @@ $pb_dark_title_colors: (
 
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
-    &.pb_title_#{$name} {
+    &[class*=_#{$name}] {
       color: $color
     }
   }
@@ -28,4 +28,4 @@ $pb_dark_title_colors: (
 
 @mixin title_dark {
   color: $text_dk_default;
-}
+}

data/app/pb_kits/playbook/pb_title/title.rb

@@ -21,46 +21,36 @@ module Playbook
                           default: nil
 
       def classname
-        title_classes = ["pb_title_kit"]
-
         if is_size_responsive
-          title_classes << "pb_title_#{variant}" if variant.present?
-          title_classes << "pb_title_#{color}" if color.present?
-          title_classes << "pb_title_#{is_bold}" if is_bold.present?
-          title_classes += generate_responsive_size_classes
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          title_classes << "pb_title_#{size}" if size.present?
-          title_classes << "pb_title_#{variant}" if variant.present?
-          title_classes << "pb_title_#{color}" if color.present?
-          title_classes << "pb_title_#{is_bold}" if is_bold.present?
-          title_classes += generate_display_size_classes
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
-
-        generate_classname(title_classes.compact.join(" "), separator: " ")
       end
 
       def is_bold
         bold ? nil : "thin"
       end
 
-      def generate_display_size_classes
-        return [] if display_size.nil?
+      def generate_display_size
+        return "" if display_size.nil?
 
-        ["pb_title_dynamic_#{display_size}"]
+        " pb_title_kit_dynamic_#{display_size}"
       end
 
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end
 
-      def generate_responsive_size_classes
-        classes = []
+      def generate_responsive_size_classname
+        css = ""
         if is_size_responsive
           size.each do |key, value|
-            classes << "pb_title_#{key}_#{value}"
+            css += " pb_title_kit_#{key}_#{value}"
           end
         end
-        classes
+
+        css unless css.blank?
       end
     end
   end