playbook_ui 14.10.0.pre.rc.23 → 14.10.0.pre.rc.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1d73e15bf41e2c7f0c5695db86c3af7e516c9483349001c97c3f2ceec20253b
-  data.tar.gz: b92a027af7c61274e867114228607f0b8e9e4f3fbf4dbc9e0ccb7aabae34c2bf
+  metadata.gz: b26b4329b7f52da4342da5121155d567ba0beb978c9e559237c1fa9fab22ab69
+  data.tar.gz: d72a4c640e78ec6bf8432484d81cf8ff27d77ae5975c150f3f802faa031e70c4
 SHA512:
-  metadata.gz: 9eb5845b95d23bf1490ec7a9ff5b11531aa74879a3d13d61693dcc9b23edcb8d9bdb65a4369ae7e711ad1d43be46375a7faf79c101f6e3b59a1fcfd08fded7c7
-  data.tar.gz: 7986936bc3d85c3fd1649d883527940aa61c9d4e429acb10eae6e2ba36db6f5ef53fd575aa6179bf786711c5694ba26d7a0caa465ebb3c06baeb91f76f61a66c
+  metadata.gz: 1eacdd6d2523334501f35f533c0ccceecae1f4281e889d6c36f09e96f441204ccdb55dcbe8b3675d552358b32d09d055f415f22770da3825fa6b2c50fb9cdd30
+  data.tar.gz: 562146dcf67058f2eb7ef1f97a12b3a5f6efc4db784dfafd1260e5346722fe104633dc38a4edd041ab8d347a5d3e7165f35d8b384b2d469eebc5a9c7f2a8c1da

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

@@ -0,0 +1,57 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+
+@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([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_md;
+      }
+    }
+
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
+
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -12,6 +15,12 @@
     }
   }
 
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +36,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-    
+
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +159,7 @@
   & > [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;
-    } 
+    }
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {