From ffc8bd1041d0522d197f037fffd9d472eec6ac16 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 18 Dec 2024 11:27:19 -0500 Subject: [PATCH] Move error state alignment css into mixin --- .../pb_form_group/_error_state_mixin.scss | 49 ++++++++++++ .../playbook/pb_form_group/_form_group.scss | 80 ++++++++++--------- 2 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss diff --git a/playbook/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss b/playbook/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss new file mode 100644 index 0000000000..977bfb4085 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss @@ -0,0 +1,49 @@ +@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-left-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, + .pb_select_kit_wrapper.error { + padding-top: $space_md; + margin-top: 2px; + + .pb_select_kit_caret { + padding-top: $space_xl; + } + } + } +} + +@mixin error-state-right-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; + } + } +} diff --git a/playbook/app/pb_kits/playbook/pb_form_group/_form_group.scss b/playbook/app/pb_kits/playbook/pb_form_group/_form_group.scss index 527030f06a..afbe6874fa 100644 --- a/playbook/app/pb_kits/playbook/pb_form_group/_form_group.scss +++ b/playbook/app/pb_kits/playbook/pb_form_group/_form_group.scss @@ -1,4 +1,5 @@ @import "../tokens/spacing"; +@import "./error_state_mixin"; [class^=pb_form_group_kit] { display: inline-flex; @@ -14,43 +15,48 @@ } } - &: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; - } - - &: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) { - position: relative; - align-items: flex-start; - .pb_select_kit_wrapper, - .pb_select_kit_wrapper.error { - padding-top: $space_md; - margin-top: 2px; - .pb_select_kit_caret { - padding-top: $space_xl; - } - } - } - - &: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; - } - - &: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; - } - - &: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; - } - } +@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; + + // &: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; + // } + + // &: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, + // .pb_select_kit_wrapper.error { + // padding-top: $space_md; + // margin-top: 2px; + // .pb_select_kit_caret { + // padding-top: $space_xl; + // } + // } + // } + + // &: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; + // } + + // &: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; + // } + + // &: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; + // } + // } & [class^=pb_text_input_kit] .text_input_wrapper, & [class^=pb_date_picker_kit] .input_wrapper,