playbook_ui 14.25.0.pre.alpha.PLAY2414removedialoghelper10118 → 14.25.0.pre.alpha.PLAY2419dialogaccessibility10271

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_primary none')
+    expect(kit).toHaveClass('pb_form_pill_kit pb_form_pill_primary pb_form_pill_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_neutral none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_neutral pb_form_pill_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_primary small none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_small pb_form_pill_primary pb_form_pill_none`)
 });
 
 test('displays icon', () => {
@@ -60,5 +60,5 @@ test('displays icon', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_icon pb_form_pill_primary pb_form_pill_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,12 +56,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   delete filteredProps.truncate
 
   const css = classnames(
-    `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(filteredProps),
-    wrappedClass,
-    className,
-    size === 'small' ? 'small' : null,
-    textTransform,
+    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,
   )
 
   const dataProps = buildDataProps(data)

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

@@ -20,7 +20,14 @@ module Playbook
                      default: false
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
+        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: " ")
       end
 
       def display_text
@@ -32,7 +39,7 @@ module Playbook
       end
 
       def icon_class
-        icon ? "icon" : nil
+        icon ? "icon" : ""
       end
 
       def close_icon_size

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

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

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

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

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

@@ -1,4 +1,4 @@
-[class^=pb_highlight_kit] {
+.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.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
+    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).toHaveTextContent(address);
 
     cleanup()
   });
 
   test("emphasize city", () => {
     const { container } = render(<HomeAdressStreetTest emphasis="city" />);
-    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
+    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).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},
+  aria?: { [key: string]: string | boolean }
   border?: string,
   className?: string,
   color?: string,
@@ -211,7 +211,15 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+
+  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 dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -222,6 +230,7 @@ const Icon = (props: IconProps) => {
         <>
           {
             React.cloneElement(iconElement || customIcon, {
+              ...ariaProps,
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -237,6 +246,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <span
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classesEmoji}
@@ -250,6 +260,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <i
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classes}

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

@@ -110,12 +110,20 @@ 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 {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -24,7 +24,7 @@ $icon_colors: (
   }
 
   &:active {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -33,7 +33,7 @@ $icon_colors: (
   }
 
   &:hover:active {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -46,7 +46,7 @@ $icon_colors: (
     border-radius: 8px;
   }
 
-  [class*="pb_button_kit"] {
+  .pb_button_kit {
     min-height: 0;
     background: none;
     position: relative;

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

@@ -14,55 +14,56 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-[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;
+// 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;
       position: relative;
-      z-index: 0;
-    }
-  }
-
-  @each $name, $size in $pb_icon_circle_sizes {
-    &[class*=_size_#{$name}] {
-      width: $size;
-      height: $size;
-      border-radius: $size/2;
+      
+      // Size-specific styles
+      width: $size_value;
+      height: $size_value;
+      border-radius: $size_value/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
-      line-height: $size;
+      font-size: if($size_name == "xxs", $size_value - 6px, $size_value * 0.38);
+      line-height: $size_value;
       flex-shrink: 0;
       flex-grow: 0;
-      flex-basis: $size;
-    }
-  }
-
-  @each $color_name, $color_value in $colors {
-    &[class*=_#{"" + $color_name}] {
+      flex-basis: $size_value;
+      
+      // Color/variant-specific styles
       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 }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
 <% 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: "lighter"
+                     default: "default"
 
       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_size_3")
+        const value = kit.querySelector(".pb_title_kit.pb_title_3")
         expect(value.textContent).toEqual("64.18")
     })
 

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

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

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

@@ -9,50 +9,55 @@ $image-sizes: (
   "xl": 140px,
 );
 
-[class^=pb_image_kit] {
+.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 {
   position: relative;
   object-fit: cover;
 
-  @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;
-    }
-
-    &[class*= rounded] {
-      border-radius: $border-rad-heaviest;
-    }
+  &.rounded {
+    border-radius: $border-rad-heaviest;
+  }
 
-    &.fade {
-      opacity: 0;
-      &.lazyloaded {
-        opacity: 1;
-        transition: opacity 300ms ease-in;
-      }
+  &.fade {
+    opacity: 0;
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 300ms ease-in;
     }
+  }
 
-    &.blur {
-      filter: blur(5px);
-      &.lazyloaded {
-        -webkit-filter: blur(0);
-        filter: blur(0);
-        transition: filter 300ms ease-in;
-      }
+  &.blur {
+    filter: blur(5px);
+    &.lazyloaded {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+      transition: filter 300ms ease-in;
     }
+  }
 
-    &.scale {
-      opacity: 0;
-      transform: scale(0.9);
-      &.lazyloaded {
-        opacity: 1;
-        transform: scale(1);
-        transition: 700ms ease-in;
-      }
+  &.scale {
+    opacity: 0;
+    transform: scale(0.9);
+    &.lazyloaded {
+      opacity: 1;
+      transform: scale(1);
+      transition: 700ms 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;
+  }
+}

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

@@ -1,7 +1,7 @@
 @import "../pb_caption/caption";
 @import "../pb_pill/pill";
 
-[class^=pb_label_pill_kit] {
+.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,7 +1,8 @@
 @import "../tokens/spacing";
 
-[class^=pb_label_value_kit] {
-  [class^=pb_caption_kit]  {
+.pb_label_value_kit,
+.pb_label_value_kit_details {
+  .pb_caption_kit_md  {
     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_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_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_size_4_link")
+        const activeProp = kit.querySelector(".pb_title_kit.pb_title_4.pb_title_link")
         expect(activeProp).toBeInTheDocument()
     })
 })