From 6720899b55ccdfb3e16594cc8aff1b252add630a Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 11 Dec 2024 10:11:37 -0500 Subject: [PATCH 1/6] Use has to add appropriate css with form group --- .../playbook/pb_form_group/_form_group.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) 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 926ba8b65a..feb5dbad59 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,7 +1,7 @@ [class^=pb_form_group_kit] { display: inline-flex; flex-direction: row; - align-items: flex-end; + align-items: flex-start; justify-content: flex-start; &[class*=_full] { @@ -12,6 +12,18 @@ } } + &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){ + align-items: flex-end; + } + + &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){ + align-items: center; + } + + &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){ + align-items: center; + } + & [class^=pb_text_input_kit] .text_input_wrapper, & [class^=pb_date_picker_kit] .input_wrapper, & [class^=pb_select] { @@ -27,7 +39,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 +162,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 { From 540522c93e33b468c37b74fc1d419f3888d6c482 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 18 Dec 2024 10:18:46 -0500 Subject: [PATCH 2/6] Update css to handle different variations of error, labels, and kits in form group --- .../playbook/pb_form_group/_form_group.scss | 59 +++++++++++++++++-- 1 file changed, 55 insertions(+), 4 deletions(-) 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 feb5dbad59..a84f5f253c 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,7 +1,9 @@ +@import "../tokens/spacing"; + [class^=pb_form_group_kit] { display: inline-flex; flex-direction: row; - align-items: flex-start; + align-items: flex-end; justify-content: flex-start; &[class*=_full] { @@ -12,18 +14,67 @@ } } - &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){ + + // This is handeling the misalignment of the buttons when the text input has an error and/or label + &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) { + align-items: center; + } + + &:has(.pb_text_input_kit.error):has([class^=pb_button_kit]) { + align-items: flex-start; + } + + //This is handeling when two text inputs next to each other with and without an error + &:has(.pb_text_input_kit.error):has(.pb_text_input_kit) { + align-items: flex-start; + } + + //This is handeling when a text input and a date kit next to each other with and without an error + &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error) { + align-items: flex-start; + } + + //This is handeling when a text input and select kit are next to each other with and without an error + &:has(.pb_text_input_kit):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) { + position: relative; + align-items: flex-start; + .pb_select_kit_wrapper.error { + padding-top: $space_md; + margin-top: 2px; + .pb_select_kit_caret{ + padding-top: $space_xl; + } + } + } + + &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) { align-items: flex-end; } - &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){ + &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) { align-items: center; } - &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){ + &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input) { 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, & [class^=pb_select] { From 7a4af1807b613b590b99ed8c2757c920e763c27d Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 18 Dec 2024 11:06:14 -0500 Subject: [PATCH 3/6] Refactor has css conditions --- .../playbook/pb_form_group/_form_group.scss | 43 +++++-------------- 1 file changed, 10 insertions(+), 33 deletions(-) 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 a84f5f253c..527030f06a 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 @@ -14,52 +14,29 @@ } } - - // This is handeling the misalignment of the buttons when the text input has an error and/or label - &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) { - align-items: center; - } - - &:has(.pb_text_input_kit.error):has([class^=pb_button_kit]) { - align-items: flex-start; - } - - //This is handeling when two text inputs next to each other with and without an error - &:has(.pb_text_input_kit.error):has(.pb_text_input_kit) { - align-items: flex-start; - } - - //This is handeling when a text input and a date kit next to each other with and without an error - &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error) { - align-items: flex-start; - } - - //This is handeling when a text input and select kit are next to each other with and without an error - &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error) { + &: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: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{ + .pb_select_kit_caret { padding-top: $space_xl; } } } - &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) { - align-items: flex-end; - } - - &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) { - align-items: center; - } - - &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input) { + &: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; } From ffc8bd1041d0522d197f037fffd9d472eec6ac16 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 18 Dec 2024 11:27:19 -0500 Subject: [PATCH 4/6] 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, From c40287e8ca53f4acda5a32bbf59c70b748cc37f9 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Wed, 18 Dec 2024 14:13:05 -0500 Subject: [PATCH 5/6] Remove code comments --- .../playbook/pb_form_group/_form_group.scss | 37 ------------------- 1 file changed, 37 deletions(-) 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 afbe6874fa..009e50908b 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 @@ -21,43 +21,6 @@ @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, & [class^=pb_select] { From 109d5449fe52014cc80d92a76ac1e81588ba751f Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Fri, 20 Dec 2024 10:06:23 -0500 Subject: [PATCH 6/6] Break up styling selectors --- .../playbook/pb_form_group/_error_state_mixin.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 index 977bfb4085..0518a8f4f8 100644 --- 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 @@ -20,12 +20,20 @@ } } -@mixin error-state-left-side-select-kit { +@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, + .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; @@ -37,7 +45,7 @@ } } -@mixin error-state-right-side-select-kit { +@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;