feat(ConditionBuilder): implementation of main content blocks (carbon…

…-design-system#4928)

* feat(ConditionBuilder):implementation of  main content blocks, add, remove funtionality, styles

* feat(conditionBuilder): spellchecks , comments , fixes

* feat(conditionBuilder): review comment changes

* feat(conditionBuilder): review comment changes2

* feat(conditionBuilder): review comment changes3

* feat(conditionBuilder): revamped the logic for opening popovers

---------

Co-authored-by: Matt Gallo <[email protected]>
Co-authored-by: David Menendez <[email protected]>

packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss

@@ -8,7 +8,11 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme';
 
+@use './styles/index';
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
@@ -23,3 +27,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 // .#{$block-class} {
 //   // TODO: Styles.
 // }
+
+.#{$block-class}__condition-builder__group {
+  display: flex;
+}
+
+.#{$block-class}__condition-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+.#{$block-class}__gap {
+  margin-right: $spacing-01;
+}
+.#{$block-class}__gap-bottom {
+  margin-bottom: $spacing-01;
+}
+.#{$block-class}__condition-block {
+  display: flex;
+  flex-direction: row;
+}

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -0,0 +1,47 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/motion';
+@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__condition-block {
+  position: relative;
+  display: inline-flex;
+  margin-block-end: $spacing-01;
+}
+
+.#{$block-class}__condition-block:focus {
+  outline: none;
+}
+
+.#{$block-class}__condition-builder-condition:focus::after,
+.#{$block-class}__condition-block:focus::after {
+  @include focus-outline.focus-outline('outline');
+
+  position: absolute;
+  content: '';
+  inset: 0;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button {
+  background-color: $tag-background-red;
+  color: $tag-color-red;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button:hover {
+  background-color: $tag-hover-red;
+}
+
+.#{$block-class}__text-ellipsis {
+  display: block;
+  overflow: hidden;
+  max-width: $spacing-13;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -0,0 +1,161 @@
+@use '@carbon/react/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/utilities' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/components/tag';
+
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__content-container * {
+  @include type-style('body-01');
+}
+
+.#{$block-class}__condition-builder-item__content {
+  overflow: auto;
+  min-width: $spacing-07 + $spacing-13;
+  max-width: $spacing-13 + $spacing-13;
+  max-height: $spacing-13 + $spacing-13 + $spacing-07;
+}
+
+.#{$block-class}__condition-builder-item__title {
+  @include type-style('heading-01');
+
+  padding: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__search {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option {
+  height: 2rem;
+  cursor: pointer;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-item-option__option-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: $spacing-03;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__condition-builder-item-option
+  > ul[aria-multiSelectable='true']
+  .#{$block-class}__condition-builder-item-option__option-label {
+  justify-content: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option:not(:first-of-type)
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start: 0.0625rem solid $border-subtle;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option:hover
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start-color: transparent;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true'] {
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']:hover {
+  background-color: $layer-selected-hover;
+}
+
+.#{$block-class}__condition-builder-item-date,
+.#{$block-class}__condition-builder-item-text,
+.#{$block-class}__condition-builder-item-number {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-checkmark {
+  margin-left: auto;
+}
+
+.#{$block-class}__condition-builder-button {
+  @include button-reset();
+
+  display: inline-flex;
+  height: $spacing-07;
+  align-items: center;
+  background-color: $layer;
+  color: inherit;
+  column-gap: $spacing-02;
+  cursor: pointer;
+  padding-inline: $spacing-02;
+  white-space: nowrap;
+}
+.#{$block-class}__condition-builder-button:hover {
+  background-color: $layer-hover;
+}
+.#{$block-class}__condition-builder__group.hoveredConnector
+  .#{$block-class}__condition-wrapper
+  > .conditionBlockWrapper
+  .#{$block-class}__connector-button {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-button:focus {
+  @include focus-outline.focus-outline('outline');
+
+  content: '';
+  inset: 0;
+}
+
+.#{$block-class}__statement-button,
+.#{$block-class}__connector-button {
+  min-width: $spacing-10;
+  padding-inline: $spacing-03;
+}
+.#{$block-class}__property-field {
+  @include type-style('heading-01');
+
+  padding-left: $spacing-03;
+}
+.#{$block-class}__close-condition {
+  padding-right: $spacing-03;
+}
+.#{$block-class}__add-button {
+  padding-right: $spacing-03;
+  padding-left: $spacing-03;
+}
+.#{$block-class}__conditionWrapper {
+  display: flex;
+}
+
+.#{$block-class}__multiselectSelectionStatusContainer {
+  display: flex;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option:focus {
+  @include focus-outline.focus-outline('outline');
+}

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_index.scss

@@ -0,0 +1,2 @@
+@use './conditionBuilderItem';
+@use './conditionBuilderCondition';