RubyGems - playbook_ui - Versions diffs - 14.25.0.pre.alpha.PLAY2425textinputaccessibility9851 → 14.25.0.pre.alpha.PLAY2431fixextragap10276 - Mend

playbook_ui 14.25.0.pre.alpha.PLAY2425textinputaccessibility9851 → 14.25.0.pre.alpha.PLAY2431fixextragap10276

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

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

@@ -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 CHANGED Viewed

@@ -138,14 +138,10 @@ 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}
         className="text_input"
         disabled={disabled}
         id={id}
@@ -203,20 +199,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label"
-              text={label}
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={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 CHANGED Viewed

@@ -9,27 +9,23 @@
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx CHANGED Viewed

@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
       <br />
       <TextInput
-          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb CHANGED Viewed

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -17,7 +15,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>

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

@@ -65,16 +65,10 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
-      def error_id
-        "#{id}-error" if error.present?
-      end
     private
       def all_input_options
         {
-          'aria-describedby': error.present? ? error_id : nil,
-          'aria-invalid': error.present?,
           autocomplete: autocomplete ? nil : "off",
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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", () => {

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

@@ -1,73 +1,78 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/typography";
 @import "../tokens/screen_sizes";
 @import './title_mixin';
-[class^=pb_title_kit] {
-  &[class*=_1] {
+.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 {
     @include pb_title_1;
-    @include title_colors;
     @include pb_title_bold;
   }
-  &[class*=_2] {
+  &.pb_title_2 {
     @include pb_title_2;
-    @include title_colors;
     @include pb_title_bold;
   }
-  &[class*=_3] {
+  &.pb_title_3 {
     @include pb_title_3;
-    @include title_colors;
     @include pb_title_bold;
   }
-  &[class*=_4] {
+  &.pb_title_4 {
     @include pb_title_4;
-    @include title_colors;
   }
-  &[class*=_thin] {
+  &.pb_title_thin {
     @include pb_title_thin;
   }
-  &[class*=_display] {
+  // Color classes
+  @include title_colors;
+  // Display sizes
+  &.pb_title_display {
     font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
+    font-weight: $bold;
   }
-  &[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);
-    }
+  // 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);
+  }
+  &.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");
-      &[class*=_#{$size}_#{$title_size_value}] {
+      &.pb_title_#{$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; }
@@ -83,9 +88,9 @@
   &.dark {
     @include title_dark;
     @each $name, $color in $pb_dark_title_colors {
-      &[class*="_#{$name}"] {
+      &.pb_title_#{$name} {
         color: $color;
       }
     }
   }
-}
+}

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

@@ -43,32 +43,41 @@ 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 = () => {
-    let css = ''
+    const classes: string[] = []
     if (!isSizeNumberOrString) {
       Object.entries(size).forEach((sizeObj) => {
-        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
+        classes.push(`pb_title_${sizeObj[0]}_${sizeObj[1]}`)
       })
     }
-    return css.trim()
+    return classes
   }
   const buildDisplaySize = () => {
     if (displaySize) {
-      return `pb_title_kit_dynamic_${displaySize}`
+      return [`pb_title_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(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
+    titleClasses.join(' '),
     globalProps(props),
-    buildDisplaySize(),
-    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

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

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