playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -278,7 +278,7 @@ test("MultiSelect prop to allow multiple selections + add correct Form Pills", (
   const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
   fireEvent.click(option[0]); // Select first option
   fireEvent.click(option[1]); // Select second option
-  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary");
   expect(formPills.length).toBe(2);
   expect(formPills[0]).toHaveTextContent("United States");
   expect(formPills[1]).toHaveTextContent("Canada");
@@ -314,7 +314,7 @@ test("renders form pills inside trigger", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
   expect(formPill).toBeInTheDocument()
   })
 
@@ -333,7 +333,7 @@ test("multiSelect and autocomplete to work together", () => {
   expect(input).toBeInTheDocument()
     const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
   expect(formPill).toBeInTheDocument()
 })
 
@@ -350,9 +350,9 @@ test("renders form pills with size and color", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(formPill).toBeInTheDocument()
-  expect(formPill).toHaveClass("small")
+  expect(formPill).toHaveClass("pb_form_pill_small")
   })
 
 test("defaultValue works with multiSelect", () => {
@@ -365,7 +365,7 @@ test("defaultValue works with multiSelect", () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -37,9 +37,9 @@
   }
 
   &.dark {
-    [class*="pb_title_kit"],
-    [class*="pb_body_kit"],
-    [class*="pb_detail_kit"],
-    [class*="pb_button_kit_link"]:hover { color: $white; }
+    .pb_title_kit,
+    .pb_body_kit,
+    .pb_detail_kit,
+    .pb_button_kit_link:hover { color: $white; }
   }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
-[class^='pb_file_upload_kit'] {
-  [class^='pb_card_kit'] {
+.pb_file_upload_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -9,22 +9,33 @@
     border: none;
     width: 0;
   }
-  &.error {
-    [class^='pb_card_kit'] {
+  &.error,
+  &.pb_file_upload_kit_error {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error;
     }
-    [class^='pb_body_kit'][status="negative"] {
+    .pb_body_kit_negative {
       margin-top: $space_xs;
     }
   }
 }
 
-.dark [class*='pb_file_upload_kit'] {
-  [class*='pb_card_kit'] {
+.pb_file_upload_kit_error {
+  ::file-selector-button {
+    visibility: hidden;
+    padding: 0;
+    border: none;
+    width: 0;
+  }
+}
+
+.dark .pb_file_upload_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px $text_dk_lighter dashed;
   }
-  &.error {
-    [class^='pb_card_kit'] {
+  &.error,
+  &.pb_file_upload_kit_error {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -2,7 +2,7 @@
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"
-          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+          class="pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled <%= 'dark' if object.dark %>"
         >
           <%= "#{object.label}" %>
         </label>

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -6,7 +6,7 @@
     padding: 0 $space_sm !important;
   }
 
-  .pb_button_kit._link {
+  .pb_button_kit.pb_button_link {
     flex-shrink:0;
     padding: 0 $space_xs !important;
     [id^="sort"] {
@@ -14,7 +14,7 @@
     }
   }
 
-  .pb_card_body_kit._md {
+  .pb_card_body_kit_md {
     padding: 0 !important;
   }
 }
@@ -103,4 +103,4 @@
       opacity:0;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -13,7 +13,14 @@ $confirmation_toast_colors: (
   tip:          transparent,
 );
 
-.pb_fixed_confirmation_toast_kit {
+.pb_fixed_confirmation_toast_kit_success,
+.pb_fixed_confirmation_toast_kit_success_multi_line,
+.pb_fixed_confirmation_toast_kit_error,
+.pb_fixed_confirmation_toast_kit_error_multi_line,
+.pb_fixed_confirmation_toast_kit_neutral,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line,
+.pb_fixed_confirmation_toast_kit_tip,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -63,34 +70,63 @@ $confirmation_toast_colors: (
       right: $space_md;
     }
   }
+}
 
-  @each $color_name, $color_value in $confirmation_toast_colors {
-    &[class*=_#{$color_name}]  {
-      background: $color_value;
-      @if $color_name == "tip" {
-        @include gradient;
-      }
-
-      .pb_fixed_confirmation_toast_text {
-        color: $white;
-        margin: 0 $space_md 0 $space_md;
-        text-align: center;
-        white-space: pre;
-      }
-
-      .pb_icon {
-        color: $white;
-      }
-
-      &._multi_line .pb_fixed_confirmation_toast_text {
-        color: $white;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        text-align: left;
-      }
-    }
+.pb_fixed_confirmation_toast_kit_neutral,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line {
+  background: $text_lt_light;
+
+  .pb_icon {
+    color: $white !important;
+  }
+}
+
+.pb_fixed_confirmation_toast_text {
+    color: $white !important;
+    margin: 0 $space_md 0 $space_md !important;
+    text-align: center;
+    white-space: pre;
+  }
+
+.pb_fixed_confirmation_toast_kit_success,
+.pb_fixed_confirmation_toast_kit_success_multi_line {
+  background: $success;
+  .pb_icon {
+    color: $white !important;
+  }
+}
+
+.pb_fixed_confirmation_toast_kit_error,
+.pb_fixed_confirmation_toast_kit_error_multi_line {
+  background: $error;
+
+
+  .pb_icon {
+    color: $white !important;
   }
 }
+
+.pb_fixed_confirmation_toast_kit_tip,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
+  background: transparent;
+    .pb_icon {
+    color: $white !important;
+  }
+  @include gradient;
+}
+
+.pb_fixed_confirmation_toast_kit_success_multi_line,
+.pb_fixed_confirmation_toast_kit_error_multi_line,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
+  .pb_fixed_confirmation_toast_text {
+    color: $white !important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    text-align: left;
+  }
+}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -55,8 +55,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    { _multi_line: multiLine },
+    `pb_fixed_confirmation_toast_kit_${status}${multiLine ? '_multi_line' : ''}`,
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
     `${iconClass}`,
     globalProps(props),

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -64,7 +64,7 @@ test("renders no icon when icon prop is 'none'", () => {
 
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
-    expect(container.querySelector('._multi_line')).toBeInTheDocument();
+    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_neutral_multi_line')).toBeInTheDocument();
 });
 
 test('renders position when provided', () => {

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -9,7 +9,7 @@ type FlexItemPropTypes = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   shrink?: boolean,
   className?: string,
-  flex?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
+  flex?: string | number,
   order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -9,7 +9,7 @@
 
 @mixin error-state-center-selectors {
   &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_button_kit) {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
     align-items: center;
   }
 }

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,13 +1,13 @@
 @import "../tokens/spacing";
 @import "./error_state_mixin";
 
-.pb_form_group_kit {
+[class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-start;
 
-  &._full {
+  &[class*=_full] {
     display: flex;
     justify-content: space-between;
     & > div {
@@ -21,18 +21,18 @@
 @include error-state-left-side-select-kit;
 @include error-state-right-side-select-kit;
 
-  & .pb_text_input_kit .text_input_wrapper,
-  & .pb_date_picker_kit .input_wrapper,
-  & .pb_select {
+  & [class^=pb_text_input_kit] .text_input_wrapper,
+  & [class^=pb_date_picker_kit] .input_wrapper,
+  & [class^=pb_select] {
     margin-bottom: 0;
   }
 
-  .pb_text_input_kit.dark .text_input_wrapper {
+  [class^=pb_text_input_kit].dark .text_input_wrapper {
     margin-bottom: 0
   }
 
-  & > .pb_text_input_kit:not(:last-child) {
-    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -42,7 +42,7 @@
         outline-offset: -1px;
       }
     }
-    .text_input_wrapper_add_on .add-on-right .pb_card_kit {
+    .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -55,25 +55,25 @@
     }
   }
 
-  & > .pb_text_input_kit:not(:first-child) {
-    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_text_input_kit]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
-    .text_input_wrapper_add_on .add-on-left .pb_card_kit {
+    .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > .pb_button_kit:not(:last-child) {
+  & > [class^=pb_button_kit]:not(:last-child) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
     margin-bottom: 16px;
   }
 
-  & > .pb_button_kit:not(:first-child) {
+  & > [class^=pb_button_kit]:not(:first-child) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-left-width: 0;
@@ -81,72 +81,72 @@
     margin-bottom: 16px;
   }
 
-  & > .pb_phone_number_input:not(:last-child) {
-    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_phone_number_input]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-color: transparent;
     }
-    .pb_text_input_kit .text_input_wrapper input:focus,
-    .pb_text_input_kit .text_input_wrapper .text_input:focus {
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
       border-right-color: $primary;
     } 
-    .pb_text_input_kit.error .text_input_wrapper input,
-    .pb_text_input_kit.error .text_input_wrapper .text_input {
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
       border-right-color: $error;
     }   
   }
 
-  & > .pb_phone_number_input:not(:first-child), .pb_passphrase:not(:first-child) {
-    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > div:not(:first-child) > .pb_phone_number_input {
+  & > div:not(:first-child) > [class^=pb_phone_number_input] {
     .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > div:not(:last-child) > .pb_phone_number_input {
+  & > div:not(:last-child) > [class^=pb_phone_number_input] {
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-color: transparent;
     }
-    .pb_text_input_kit .text_input_wrapper input:focus,
-    .pb_text_input_kit .text_input_wrapper .text_input:focus {
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
       border-right-color: $primary;
     } 
-    .pb_text_input_kit.error .text_input_wrapper input,
-    .pb_text_input_kit.error .text_input_wrapper .text_input {
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
       border-right-color: $error;
     }  
   }
 
-  &.rails > .pb_date_picker_kit {
+  &[class*=rails] > [class^=pb_date_picker_kit] {
     margin-bottom: 0px;
   }
 
-  & > .pb_date_picker_kit:not(:last-child) {
-    .input_wrapper input, .pb_text_input_kit .date_picker_input_wrapper .flatpickr-wrapper {
+  & > [class^=pb_date_picker_kit]:not(:last-child) {
+    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
     }
   }
 
-  & > .pb_date_picker_kit:not(:first-child) {
-    .input_wrapper input, .pb_text_input_kit .date_picker_input_wrapper .flatpickr-wrapper {
+  & > [class^=pb_date_picker_kit]:not(:first-child) {
+    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > .pb_select:not(:last-child) {
+  & > [class^=pb_select]:not(:last-child) {
     margin-bottom: 0px;
     .pb_select_kit_wrapper select {
       border-bottom-right-radius: 0;
@@ -159,7 +159,7 @@
     }
   }
 
-  & > .pb_select:not(:first-child) {
+  & > [class^=pb_select]:not(:first-child) {
     margin-bottom: 0px;
     .pb_select_kit_wrapper select {
       border-bottom-left-radius: 0;
@@ -167,34 +167,34 @@
     }
   }
 
-  & > .pb_selectable_card_kit:not(:last-child) label {
+  & > [class^=pb_selectable_card_kit]:not(:last-child) label {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-color: transparent;
   }
-  & > .pb_selectable_card_kit input[type="checkbox"]:not(:checked) ~ label, .pb_selectable_card_kit input[type="radio"]:not(:checked) ~ label {
+  & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
     }
   }
 
-  & > .pb_selectable_card_kit:not(:first-child) label {
+  & > [class^=pb_selectable_card_kit]:not(:first-child) label {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & > .pb_selectable_card_icon_kit:not(:last-child) .pb_selectable_card_kit label {
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) [class^=pb_selectable_card_kit] label {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
   }
 
-  & > .pb_selectable_card_icon_kit:not(:first-child) .pb_selectable_card_kit label {
+  & > [class^=pb_selectable_card_icon_kit]:not(:first-child) [class^=pb_selectable_card_kit] label {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & > .pb_selectable_card_icon_kit:not(:last-child) {
-    .pb_selectable_card_kit input[type="checkbox"]:not(:checked) ~ label, .pb_selectable_card_kit input[type="radio"]:not(:checked)~ label {
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
+    [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
       border-right-color: transparent;
       &:hover {
         border-right-color: $slate;
@@ -202,12 +202,12 @@
     }
   }
 
-  & > .pb_typeahead_kit {
+  & > [class^=pb_typeahead_kit] {
     min-width: 200px;
   }
 
-  & > .pb_typeahead_kit:not(:last-child) {
-    .pb_text_input_kit .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_typeahead_kit]:not(:last-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -215,8 +215,8 @@
     }
   }
 
-  & > .pb_typeahead_kit:not(:first-child) {
-    .pb_text_input_kit .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
+  & > [class^=pb_typeahead_kit]:not(:first-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
@@ -247,4 +247,4 @@
   &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
       align-self: baseline;
   }
-}
+}