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

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

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

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_thin')
 })
 
 test('with colors', () => {
@@ -38,7 +38,7 @@ test('with colors', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_success')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_success')
 })
 
 test('with responsive title', () => {
@@ -51,5 +51,5 @@ test('with responsive title', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
+    expect(kit).toHaveClass('pb_title_kit pb_title_xs_3 pb_title_sm_2 pb_title_md_1')
 })

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -1,20 +1,31 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-[class^=pb_title_count_kit] {
+.pb_title_count_kit_left_lg,
+.pb_title_count_kit_left_sm,
+.pb_title_count_kit_center_lg,
+.pb_title_count_kit_center_sm,
+.pb_title_count_kit_right_lg,
+.pb_title_count_kit_right_sm {
   display: flex;
-  justify-content: flex-start;
   align-items: baseline;
 
   & > .pb_title_count_text {
     padding-right: $space-xs;
   }
+}
 
-  &[class*=_center] {
-    justify-content: center;
-  }
+.pb_title_count_kit_left_lg,
+.pb_title_count_kit_left_sm {
+  justify-content: flex-start;
+}
 
-  &[class*=_right] {
-    justify-content: flex-end;
-  }
+.pb_title_count_kit_center_lg,
+.pb_title_count_kit_center_sm {
+  justify-content: center;
 }
+
+.pb_title_count_kit_right_lg,
+.pb_title_count_kit_right_sm {
+  justify-content: flex-end;
+}

data/app/pb_kits/playbook/pb_title_detail/_title_detail.scss

@@ -1,17 +1,16 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-[class^=pb_title_detail_kit]{
-  &[class*=_center]  {
-    & > [class^=pb_title],
-    & > [class^=pb_body] {
-      text-align: center;
-    }
+.pb_title_detail_kit_center {
+  & > .pb_title_kit,
+  & > .pb_body_kit_light {
+    text-align: center;
   }
-  &[class*=_right]  {
-    & > [class^=pb_title],
-    & > [class^=pb_body] {
-      text-align: right;
-    }
+}
+
+.pb_title_detail_kit_right {
+  & > .pb_title_kit,
+  & > .pb_body_kit_light {
+    text-align: right !important;
   }
 }

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -5,7 +5,10 @@ $color_checkbox_default: $border_light;
 $color_disabled: darken($border_light, 20%);
 $transition: .2s ease-in-out;
 
-[class^=pb_toggle_kit] {
+.pb_toggle_kit_sm_on,
+.pb_toggle_kit_sm_off,
+.pb_toggle_kit_md_on,
+.pb_toggle_kit_md_off {
   position: relative;
   $width: 44px;
   $height: $width / 2;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -22,7 +22,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
   }
 }
 
-[class^="pb_tooltip_kit"] {
+.pb_tooltip_kit {
   ~ .tooltip_tooltip,
   .tooltip_tooltip {
     display: block;
@@ -103,8 +103,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
   }
 
-  &.dark,
-  &[class*=_dark]{
+  &.dark {
     ~.tooltip_tooltip,
     .tooltip_tooltip {
       //react
@@ -136,7 +135,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 }
 
 // Right
-[class^="pb_tooltip_kit"] .tooltip_tooltip {
+.pb_tooltip_kit .tooltip_tooltip {
   $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
 
   &[data-popper-placement="right"] {

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -26,7 +26,7 @@ module Playbook
       prop :width
 
       def classname
-        generate_classname("pb_tooltip_kit", dark_class)
+        generate_classname("pb_tooltip_kit")
       end
 
       def remove_height_properties(combined_html_options_style)

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -63,7 +63,7 @@ test('typeahead with pills', () => {
   )
 
   const kit = screen.getByTestId('pills-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_primary")
+  const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
   expect(pill).toBeInTheDocument()
 })
 
@@ -89,7 +89,7 @@ test('typeahead multi select with badges and small pills', () => {
   )
 
   const kit = screen.getByTestId('small-pill-test')
-  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
+  const badge = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary.mr_xs.pb_form_pill_small")
   expect(badge).toBeInTheDocument()
 })
 
@@ -135,6 +135,6 @@ test('typeahead with colored pills', () => {
   )
 
   const kit = screen.getByTestId('pills-color-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
+  const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(pill).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           placeholder=""
           {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -7,25 +7,4 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           pillColor="neutral"
           placeholder=""

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Colors",
+    placeholder: "All Products",
     options: options, 
-    label: "Colors",
+    label: "Products",
     name: :foo,
     is_multi: false
   })

data/app/pb_kits/playbook/pb_user/_user.scss

@@ -3,52 +3,102 @@
 @import "../pb_avatar/avatar";
 @import "../tokens/spacing";
 
-[class^=pb_user_kit]{
+// Base user kit styles
+.pb_user_kit_left_horizontal_sm,
+.pb_user_kit_left_horizontal_md,
+.pb_user_kit_left_horizontal_lg,
+.pb_user_kit_center_horizontal_sm,
+.pb_user_kit_center_horizontal_md,
+.pb_user_kit_center_horizontal_lg,
+.pb_user_kit_right_horizontal_sm,
+.pb_user_kit_right_horizontal_md,
+.pb_user_kit_right_horizontal_lg,
+.pb_user_kit_left_vertical_sm,
+.pb_user_kit_left_vertical_md,
+.pb_user_kit_left_vertical_lg,
+.pb_user_kit_center_vertical_sm,
+.pb_user_kit_center_vertical_md,
+.pb_user_kit_center_vertical_lg,
+.pb_user_kit_right_vertical_sm,
+.pb_user_kit_right_vertical_md,
+.pb_user_kit_right_vertical_lg {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: row;
+}
 
-  // Orientation =============
-  &[class*=_vertical]  {
-    flex-direction: column;
+// Vertical orientation
+.pb_user_kit_left_vertical_sm,
+.pb_user_kit_left_vertical_md,
+.pb_user_kit_left_vertical_lg,
+.pb_user_kit_center_vertical_sm,
+.pb_user_kit_center_vertical_md,
+.pb_user_kit_center_vertical_lg,
+.pb_user_kit_right_vertical_sm,
+.pb_user_kit_right_vertical_md,
+.pb_user_kit_right_vertical_lg {
+  flex-direction: column;
 
-    &[class*=_center]  {
-      align-items: center;
+  .pb_avatar_kit_size_sm,
+  .pb_avatar_kit_size_md,
+  .pb_avatar_kit_size_lg,
+  .pb_avatar_kit_size_xl {
+    margin-bottom: $space-xs;
+  }
+}
 
-      [class^=pb_title],
-      [class^=pb_body] {
-        text-align: center;
-      }
-    }
+.pb_user_kit_center_vertical_sm,
+.pb_user_kit_center_vertical_md,
+.pb_user_kit_center_vertical_lg {
+  align-items: center;
 
-    &[class*=_right]  {
-      align-items: flex-end;
+  .pb_title_kit,
+  .pb_body_kit {
+    text-align: center;
+  }
+}
 
-      [class^=pb_title],
-      [class^=pb_body] {
-        text-align: right;
-      }
-    }
+// Vertical right alignment
+.pb_user_kit_right_vertical_sm,
+.pb_user_kit_right_vertical_md,
+.pb_user_kit_right_vertical_lg {
+  align-items: flex-end;
 
-    [class^=pb_avatar] {
-      margin-bottom: $space-xs;
-    }
+  .pb_title_kit,
+  .pb_body_kit {
+    text-align: right;
   }
+}
 
-  &[class*=_horizontal]  {
-    align-items: center;
+// Horizontal orientation
+.pb_user_kit_left_horizontal_sm,
+.pb_user_kit_left_horizontal_md,
+.pb_user_kit_left_horizontal_lg,
+.pb_user_kit_center_horizontal_sm,
+.pb_user_kit_center_horizontal_md,
+.pb_user_kit_center_horizontal_lg,
+.pb_user_kit_right_horizontal_sm,
+.pb_user_kit_right_horizontal_md,
+.pb_user_kit_right_horizontal_lg {
+  align-items: center;
 
-    &[class*=_center]  {
-      justify-content: center;
-    }
+  .pb_avatar_kit_size_lg,
+  .pb_avatar_kit_size_md,
+  .pb_avatar_kit_size_sm,
+  .pb_avatar_kit_size_xl {
+    margin-right: $space-sm;
+  }
+}
 
-    &[class*=_right]  {
-      justify-content: flex-end;
-    }
+.pb_user_kit_center_horizontal_sm,
+.pb_user_kit_center_horizontal_md,
+.pb_user_kit_center_horizontal_lg {
+  justify-content: center;
+}
 
-    [class^=pb_avatar] {
-      margin-right: $space-sm;
-    }
-  }
+.pb_user_kit_right_horizontal_sm,
+.pb_user_kit_right_horizontal_md,
+.pb_user_kit_right_horizontal_lg {
+  justify-content: flex-end;
 }

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -1,11 +1,18 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name |  |  |
+| **name** | `String` | Sets the User's name | `""` |  |
+| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
+| **image** | `Image?` | Sets image for the avatar | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
+| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **territory** | `String?` | Adds the User's territory | `nil` |  |
+| **title** | `String?` | Adds a title | `nil` |  |
+| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
+| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
 | **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
-| **image** | `Image` | Sets image for the avatar |  |  |
-| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
-| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
-| **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
+| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
+| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
+| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -38,7 +38,7 @@ test('bold prop applies correct styling when false', () => {
   const titleElement = screen.getByText("Anna Black")
   expect(titleElement).toBeInTheDocument()
 
-  expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
+  expect(titleElement).toHaveClass('pb_title_kit pb_title_4 pb_title_thin')
 })
 
 test('align prop adds desired class', () => {

data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss

@@ -4,7 +4,10 @@ $badge-sizes: (
   "lg":   36px
 );
 
-[class^=pb_user_badge_kit] {
+.pb_user_badge_kit,
+.pb_user_badge_kit_sm,
+.pb_user_badge_kit_md,
+.pb_user_badge_kit_lg {
   .pb_user_badge_wrapper {
     svg,
     img {
@@ -12,13 +15,25 @@ $badge-sizes: (
       height: 100%;
     }
   }
+}
 
-  @each $name, $size in $badge-sizes {
-    &[class*=_#{$name}] {
-      .pb_user_badge_wrapper {
-        width: $size;
-        height: $size;
-      }
-    }
+.pb_user_badge_kit_sm {
+  .pb_user_badge_wrapper {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.pb_user_badge_kit_md {
+  .pb_user_badge_wrapper {
+    width: 26px;
+    height: 26px;
+  }
+}
+
+.pb_user_badge_kit_lg {
+  .pb_user_badge_wrapper {
+    width: 36px;
+    height: 36px;
   }
 }

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss

@@ -1,11 +1,11 @@
-[class^='pb_weekday_stacked'] {
-  &[class*='_left'] {
-    text-align: left;
-  }
-  &[class*='_center'] {
-    text-align: center;
-  }
-  &[class*='_right'] {
-    text-align: right;
-  }
+.pb_weekday_stacked_kit_left {
+  text-align: left;
+}
+
+.pb_weekday_stacked_kit_center {
+  text-align: center;
+}
+
+.pb_weekday_stacked_kit_right {
+  text-align: right;
 }

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -48,7 +48,7 @@ describe("WeekdayStacked 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("1/1") 
   });
 
@@ -86,7 +86,7 @@ describe("WeekdayStacked Kit", () => {
     );
       
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_kit_size_4");
+    const text = kit.querySelector(".pb_title_4");
     expect(text.textContent).toEqual("1") 
   });
 
@@ -99,7 +99,7 @@ describe("WeekdayStacked Kit", () => {
     );
       
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_kit_size_4");
+    const text = kit.querySelector(".pb_title_4");
     expect(text.textContent).toEqual("Jan 1") 
   });
 });

data/app/pb_kits/playbook/utilities/_gap.scss

@@ -12,6 +12,6 @@ $gap_values: (
 
 @include global_props_responsive_css($gap_values, 'gap', 'gap');
 
-@include global_props_responsive_css($gap_values, 'column_gap', 'column-gap');
+@include global_props_responsive_css($gap_values, 'columnGap', 'column-gap');
 
-@include global_props_responsive_css($gap_values, 'row_gap', 'row-gap');
+@include global_props_responsive_css($gap_values, 'rowGap', 'row-gap');

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -393,16 +393,16 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
   columnGapProps: ({ columnGap }: ColumnGap) => {
     if (typeof columnGap === 'object') {
-      return getResponsivePropClasses(columnGap, 'column_gap')
+      return getResponsivePropClasses(columnGap, 'columnGap')
     } else {
-      return columnGap ? `column_gap_${columnGap}` : ''
+      return columnGap ? `columnGap_${columnGap}` : ''
     }
   },
   rowGapProps: ({ rowGap }: RowGap) => {
     if (typeof rowGap === 'object') {
-      return getResponsivePropClasses(rowGap, 'row_gap')
+      return getResponsivePropClasses(rowGap, 'rowGap')
     } else {
-      return rowGap ? `row_gap_${rowGap}` : ''
+      return rowGap ? `rowGap_${rowGap}` : ''
     }
   },
   minHeightProps: ({ minHeight }: MinHeight) => {