playbook_ui 14.25.0.pre.alpha.PLAY2419dialogaccessibility10271 → 14.25.0.pre.alpha.PLAY2422fixedconftoastaccessibility9840

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -13,7 +13,7 @@ test('should render classname', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_form_pill_kit pb_form_pill_primary pb_form_pill_none')
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
 });
 
 test('displays text content', () => {
@@ -37,7 +37,7 @@ test('displays color variant', () => {
         />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_neutral pb_form_pill_none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
 });
 
 test('displays size variant', () => {
@@ -49,7 +49,7 @@ test('displays size variant', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_small pb_form_pill_primary pb_form_pill_none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
 });
 
 test('displays icon', () => {
@@ -60,5 +60,5 @@ test('displays icon', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_icon pb_form_pill_primary pb_form_pill_none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -48,7 +48,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     icon = "",
   } = props
 
-  const iconClass = icon ? "icon" : ""
+  const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
   const wrappedClass = wrapped ? "wrapped" : ""
 
@@ -56,13 +56,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   delete filteredProps.truncate
 
   const css = classnames(
-    icon ? 'pb_form_pill_kit_icon' : 'pb_form_pill_kit',
-    wrapped ? 'pb_form_pill_wrapped' : null,
-    size === 'small' ? 'pb_form_pill_small' : null,
-    `pb_form_pill_${color}`,
-    `pb_form_pill_${textTransform}`,
-     globalProps(filteredProps),
-     className,
+    `pb_form_pill_kit_${color}${iconClass}`,
+    globalProps(filteredProps),
+    wrappedClass,
+    className,
+    size === 'small' ? 'small' : null,
+    textTransform,
   )
 
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -20,14 +20,7 @@ module Playbook
                      default: false
 
       def classname
-        classes = []
-        classes << (icon ? "pb_form_pill_kit_icon" : "pb_form_pill_kit")
-        classes << "pb_form_pill_wrapped" if wrapped
-        classes << "pb_form_pill_small" if size == "small"
-        classes << "pb_form_pill_#{color}"
-        classes << "pb_form_pill_#{text_transform}"
-        classes.join(" ")
-        generate_classname(classes.join(" "), separator: " ")
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
       end
 
       def display_text
@@ -39,7 +32,7 @@ module Playbook
       end
 
       def icon_class
-        icon ? "icon" : ""
+        icon ? "icon" : nil
       end
 
       def close_icon_size

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,12 +1,12 @@
 @import "../tokens/colors";
 
-.pb_gauge_kit {
+[class^=pb_gauge_kit] {
 
   .fix {
     fill: $text_lt_default;
     stroke: none;
 
-    &.dark {
+    &[class*=dark] {
       fill: $text_dk_default;
     }
   }
@@ -16,7 +16,7 @@
     stroke: none;
     font: $regular $font_larger $font_family_base;
 
-    &.dark {
+    &[class*=dark] {
       fill: $text_dk_light;
     }
   }
@@ -25,7 +25,7 @@
     stroke: none;
     font: $regular $font_base $font_family_base;
 
-    &.dark {
+    &[class*=dark] {
       fill: $text_dk_light;
     }
   }
@@ -38,7 +38,7 @@
     stroke-linejoin: round;
   }
 
-  &.dark {
+  &[class*=dark] {
     color: $text_dk_default;
 
     .pb_title_kit_size_1,

data/app/pb_kits/playbook/pb_hashtag/_hashtag.scss

@@ -1,3 +1,3 @@
-.pb_hastag_kit {
+[class^=pb_hastag_kit] {
   display: inline-block;
 }

data/app/pb_kits/playbook/pb_highlight/_highlight.scss

@@ -1,4 +1,4 @@
-.pb_highlight_kit {
+[class^=pb_highlight_kit] {
   background-color: rgba($yellow,$opacity_2);
 
   mark {

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -38,14 +38,14 @@ function HomeAdressStreetTest(props) {
 
   test("emphasize street by not setting a prop", () => {
     const { container } = render(<HomeAdressStreetTest />);
-    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).toHaveTextContent(address);
+    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
 
     cleanup()
   });
 
   test("emphasize city", () => {
     const { container } = render(<HomeAdressStreetTest emphasis="city" />);
-    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).toHaveTextContent(city);
+    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
 
     cleanup()
   });

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -20,7 +20,7 @@ export type IconSizes = "lg"
 | ""
 
 type IconProps = {
-  aria?: { [key: string]: string | boolean }
+  aria?: {[key: string]: string},
   border?: string,
   className?: string,
   color?: string,
@@ -211,15 +211,7 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-
-  const normalizedAria: { [key: string]: string } = Object.fromEntries(
-    Object.entries(aria).map(([key, value]) => [
-      key,
-      typeof value === "boolean" ? String(value) : value,
-    ])
-  )
-  
-  const ariaProps = buildAriaProps(normalizedAria)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -230,7 +222,6 @@ const Icon = (props: IconProps) => {
         <>
           {
             React.cloneElement(iconElement || customIcon, {
-              ...ariaProps,
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -246,7 +237,6 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <span
-              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classesEmoji}
@@ -260,7 +250,6 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <i
-              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classes}

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -110,20 +110,12 @@ module Playbook
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
+        svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
-
-        if object.aria.present?
-          object.aria.each do |key, value|
-            k = key.to_s
-            attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
-            svg[attr] = value
-          end
-        end
-
         raw doc
       rescue OpenURI::HTTPError, StandardError
         # Handle any exceptions and return an empty string

data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss

@@ -15,7 +15,7 @@ $icon_colors: (
   height: fit-content;
 
   &:hover {
-    .pb_button_kit {
+    [class*="pb_button_kit"] {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -24,7 +24,7 @@ $icon_colors: (
   }
 
   &:active {
-    .pb_button_kit {
+    [class*="pb_button_kit"] {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -33,7 +33,7 @@ $icon_colors: (
   }
 
   &:hover:active {
-    .pb_button_kit {
+    [class*="pb_button_kit"] {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -46,7 +46,7 @@ $icon_colors: (
     border-radius: 8px;
   }
 
-  .pb_button_kit {
+  [class*="pb_button_kit"] {
     min-height: 0;
     background: none;
     position: relative;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,56 +14,55 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-// All icon circle variations with complete styling
-@each $size_name, $size_value in $pb_icon_circle_sizes {
-  @each $color_name, $color_value in $colors {
-    .pb_icon_circle_kit_size_#{$size_name}_#{$color_name} {
-      // Base styles
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      object-fit: cover;
-      overflow: hidden;
+[class^=pb_icon_circle_kit] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  object-fit: cover;
+  overflow: hidden;
+  position: relative;
+// font-family set to sans-serif ONLY for emojis.
+//Needed to fix misalignment issue caused by Proxima font
+  .icon_circle_emoji {
+    font-family: monospace;
+  }
+
+  i,
+  svg {
+    &[class^=pb_icon_kit] {
+      width: 100%;
+      height: 100%;
+      display: block;
+      text-align: center;
+      text-transform: uppercase;
       position: relative;
-      
-      // Size-specific styles
-      width: $size_value;
-      height: $size_value;
-      border-radius: $size_value/2;
+      z-index: 0;
+    }
+  }
+
+  @each $name, $size in $pb_icon_circle_sizes {
+    &[class*=_size_#{$name}] {
+      width: $size;
+      height: $size;
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: if($size_name == "xxs", $size_value - 6px, $size_value * 0.38);
-      line-height: $size_value;
+      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
+      line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
-      flex-basis: $size_value;
-      
-      // Color/variant-specific styles
+      flex-basis: $size;
+    }
+  }
+
+  @each $color_name, $color_value in $colors {
+    &[class*=_#{"" + $color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
-      
-      // font-family set to sans-serif ONLY for emojis.
-      // Needed to fix misalignment issue caused by Proxima font
-      .icon_circle_emoji {
-        font-family: monospace;
-      }
-
-      i,
-      svg {
-        &[class^=pb_icon_kit] {
-          width: 100%;
-          height: 100%;
-          display: block;
-          text-align: center;
-          text-transform: uppercase;
-          position: relative;
-          z-index: 0;
-        }
-      }
-      
       &.dark {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
       }
     }
   }
 }
+

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -11,7 +11,7 @@ module Playbook
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default royal blue orange purple teal red yellow green orange lighter],
-                     default: "default"
+                     default: "lighter"
 
       def classname
         generate_classname("pb_icon_circle_kit", "size_#{size}", variant)

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -81,7 +81,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const value = kit.querySelector(".pb_title_kit.pb_title_3")
+        const value = kit.querySelector(".pb_title_kit_size_3")
         expect(value.textContent).toEqual("64.18")
     })
 

data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss

@@ -3,34 +3,33 @@
 @import "../pb_icon/icon";
 @import "../pb_body/body";
 
-.pb_icon_value_kit_left,
-.pb_icon_value_kit_center,
-.pb_icon_value_kit_right {
+[class^=pb_icon_value_kit] {
   display: flex;
   align-items: center;
 
-  .pb_body_kit_light {
+  [class^=pb_body_kit] {
     font-size: $font-small !important;
     display: inline-flex;
     justify-content: flex-start;
     align-items: center;
 
-    svg {
+    [class*=pb_icon_kit] {
       font-size: $font-large !important;
       margin-right: $space-xs !important;
       flex-shrink: 0;
     }
+    &.dark {
+      
+    }
   }
-}
 
-.pb_icon_value_kit_left {
-  justify-content: flex-start;
-}
-
-.pb_icon_value_kit_center {
-  justify-content: center;
+  &[class*=_left] {
+    justify-content: flex-start;
+  }
+  &[class*=_center] {
+    justify-content: center;
+  }
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
 }
-
-.pb_icon_value_kit_right {
-  justify-content: flex-end;
-}

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -9,55 +9,50 @@ $image-sizes: (
   "xl": 140px,
 );
 
-.pb_image_kit,
-.pb_image_kit_size_xs,
-.pb_image_kit_size_sm,
-.pb_image_kit_size_md,
-.pb_image_kit_size_lg,
-.pb_image_kit_size_xl {
+[class^=pb_image_kit] {
   position: relative;
   object-fit: cover;
 
-  &.rounded {
-    border-radius: $border-rad-heaviest;
-  }
+  @each $name, $size in $image-sizes {
+    &[class*=size_#{$name}] {
+      width: $size;
+      height: $size;
+      object-fit: cover;
+      position: relative;
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: $size;
+    }
 
-  &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 300ms ease-in;
+    &[class*= rounded] {
+      border-radius: $border-rad-heaviest;
     }
-  }
 
-  &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 300ms ease-in;
+    &.fade {
+      opacity: 0;
+      &.lazyloaded {
+        opacity: 1;
+        transition: opacity 300ms ease-in;
+      }
     }
-  }
 
-  &.scale {
-    opacity: 0;
-    transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
+    &.blur {
+      filter: blur(5px);
+      &.lazyloaded {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        transition: filter 300ms ease-in;
+      }
     }
-  }
-}
 
-@each $name, $size in $image-sizes {
-  .pb_image_kit_size_#{$name} {
-    width: $size !important;
-    height: $size !important;
-    object-fit: cover;
-    position: relative;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: $size;
+    &.scale {
+      opacity: 0;
+      transform: scale(0.9);
+      &.lazyloaded {
+        opacity: 1;
+        transform: scale(1);
+        transition: 700ms ease-in;
+      }
+    }
   }
-}
+}

data/app/pb_kits/playbook/pb_label_pill/_label_pill.scss

@@ -1,7 +1,7 @@
 @import "../pb_caption/caption";
 @import "../pb_pill/pill";
 
-.pb_label_pill_kit {
+[class^=pb_label_pill_kit] {
   display: flex;
   justify-content: flex-start;
   align-items: center;

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,8 +1,7 @@
 @import "../tokens/spacing";
 
-.pb_label_value_kit,
-.pb_label_value_kit_details {
-  .pb_caption_kit_md  {
+[class^=pb_label_value_kit] {
+  [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -71,7 +71,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit.pb_title_4")
+        const text = kit.querySelector(".pb_title_kit_size_4")
         expect(text.textContent).toEqual("JD Installations LLC")
     })
 
@@ -103,7 +103,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const activeProp = kit.querySelector(".pb_title_kit.pb_title_4.pb_title_link")
+        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
         expect(activeProp).toBeInTheDocument()
     })
 })