#5988 Button Group Item new design (#5992)

* #5988 Button Group Item new design
Fixes #5988

* #5988 fix disabled styles, add flex styles and update screenshots
Fixes #5988

* #5988 - fix tests

* #5988 - fix postcss

* #5988 - update screenshots

* fix toolbox subtype paddings

functionalTests/property-grid/question.ts

@@ -48,8 +48,8 @@ test("Change rating auto-generate", async (t) => {
     .click(question1)
     .click(choicesTab)
     .expect(items.visible).notOk()
-    .click(Selector(".sv-button-group__item-caption").withExactText("Manual"))
+    .click(Selector(".spg-button-group__item-caption").withExactText("Manual"))
     .expect(items.visible).ok()
-    .click(Selector(".sv-button-group__item-caption").withExactText("Auto-generate"))
+    .click(Selector(".spg-button-group__item-caption").withExactText("Auto-generate"))
     .expect(items.visible).notOk();
 });

packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss

@@ -1,71 +1,88 @@
-.spg-root-modern {
-  .sv-button-group {
-    border: 1px solid var(--ctr-button-group-item-border-color, $border);
-    transition: box-shadow $creator-transition-duration, border-color $creator-transition-duration, border $creator-transition-duration;
-  }
+.spg-button-group {
+  position: relative;
+  display: flex;
+  padding: var(--ctr-button-group-padding, 0px);
+  align-items: center;
+  align-self: stretch;
 
-  .sv-button-group:focus-within {
-    box-shadow: 0 0 0 1px var(--ctr-button-group-border-color-focused, $primary);
-    border-color: var(--ctr-button-group-border-color-focused, $primary);
+  border-radius: var(--ctr-button-group-corner-radius, 0px);
+  box-shadow: inset 0 0 0 var(--ctr-button-group-border-width, 0px) var(--ctr-button-group-border-color, $border);
+  background-color: var(--ctr-button-group-background-color, $background);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 0 var(--ctr-button-group-border-width-focused, 2px) transparent;
+    pointer-events: none;
+    transition: box-shadow $creator-transition-duration;
   }
+}
 
-  .sv-button-group__item {
-    @include ctrDefaultFont;
-    background: var(--ctr-button-group-item-background-color, $background);
-    transition: background $creator-transition-duration, background-color $creator-transition-duration, color $creator-transition-duration;
-
-    &:not(:last-of-type) {
-      border-right: 1px solid var(--ctr-button-group-item-border-color, $border);
-    }
-  }
+.spg-button-group:focus-within::after {
+  box-shadow: inset 0 0 0 var(--ctr-button-group-border-width-focused, 2px) var(--ctr-button-group-border-color-focused, $primary);
+}
 
-  .sv-button-group__item--hover:hover {
-    background-color: var(--ctr-button-group-item-background-color-hovered, $background-dim);
-  }
+.spg-button-group__item {
+  @include ctrDefaultFont;
+  color: var(--ctr-button-group-item-text-color, rgba(0, 0, 0, 0.91));
 
-  .sv-button-group__item-icon {
-    use {
-      fill: var(--ctr-button-group-item-icon-color, $foreground-light);
-    }
-  }
+  display: flex;
+  padding: var(--ctr-button-group-item-padding-vertical, calcSize(1.5)) var(--ctr-button-group-item-padding-horizontal, calcSize(2));
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  flex-basis: 0;
+  flex-grow: 1;
 
-  .sv-button-group__item--selected {
-    @include ctrDefaultBoldFont;
-    color: var(--ctr-button-group-item-text-color-selected, $primary);
+  border-radius: var(--ctr-button-group-item-corner-radius, 0px);
+  box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width, 1px) var(--ctr-button-group-item-border-color, $border);
+  background-color: var(--ctr-button-group-item-background-color, $background);
 
-    .sv-button-group__item-icon use {
-      fill: var(--ctr-button-group-item-icon-color-selected, $primary);
-    }
+  transition: background $creator-transition-duration, background-color $creator-transition-duration, color $creator-transition-duration;
 
-    &:hover {
-      background-color: var(--ctr-button-group-item-background-color-hovered, $background);
-    }
+  &:not(:last-of-type) {
+    margin-right: var(--ctr-button-group-gap, -1px);
   }
+}
 
-  .sv-button-group__item--disabled {
-    color: var(--ctr-button-group-item-text-color-disabled, $foreground);
+.spg-button-group__item--hover:hover {
+  background-color: var(--ctr-button-group-item-background-color-hovered, $background-dim);
+}
 
-    .sv-button-group__item-icon use {
-      fill: var(--ctr-button-group-item-text-color-disabled, $foreground);
-    }
+.spg-button-group__item-icon {
+  use {
+    fill: var(--ctr-button-group-item-icon-color, $foreground-light);
+  }
+}
 
-    &:hover {
-      background-color: var(--ctr-button-group-item-background-color-disabled, $background);
-    }
+.spg-button-group__item--selected {
+  @include ctrDefaultBoldFont;
+  color: var(--ctr-button-group-item-text-color-selected, $primary);
+  box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width-selected, 1px) var(--ctr-button-group-item-border-color, $border);
+  background: var(--ctr-button-group-item-background-color-selected, $background);
+  .spg-button-group__item-icon use {
+    fill: var(--ctr-button-group-item-icon-color-selected, $primary);
   }
 
-  .sv-button-group:focus-within {
-    box-shadow: 0 0 0 1px var(--ctr-button-group-border-color-focused, $primary);
-    border-color: var(--ctr-button-group-border-color-focused, $primary);
+  &:hover {
+    background-color: var(--ctr-button-group-item-background-color-hovered, $background);
   }
 }
 
-.spg-root-modern.spg-root--one-category {
-  height: 100%;
-  background-color: var(--ctr-property-grid-form-background-color, $background-dim);
-  border-right: unset;
-
-  .spg-page.spg-body__page {
-    box-shadow: unset;
+.spg-button-group__item--disabled {
+  color: var(--ctr-button-group-item-text-color-disabled, $foreground);
+  background: var(--ctr-button-group-item-background-color-disabled, $background-dim);
+  .spg-button-group__item-icon use {
+    fill: var(--ctr-button-group-item-text-color-disabled, $foreground);
+  }
+  .spg-button-group__item-caption {
+    opacity: var(--ctr-button-group-item-text-opacity-disabled, 0.25);
+  }
+  &:hover {
+    background-color: var(--ctr-button-group-item-background-color-disabled, $background-dim);
   }
 }

packages/survey-creator-core/src/property-grid-theme/property-grid.scss

@@ -31,13 +31,27 @@
 .spg-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.spg-container_search .spg-root-modern {
-  height: calc(100% - 1px - calcSize(7));
+.spg-root-modern {
+  height: 0;
+  flex-grow: 1;
   overflow: auto;
 }
 
+.spg-root-modern.spg-root--one-category {
+  background-color: var(--ctr-property-grid-form-background-color, $background-dim);
+  border-right: unset;
+
+  .spg-page.spg-body__page {
+    box-shadow: unset;
+  }
+}
+
+
+
 .sv-popup--modal {
   &.sv-property-editor .sv-popup__container {
     .sv-popup_shadow {

packages/survey-creator-core/src/property-grid-theme/property-grid.ts

@@ -195,6 +195,17 @@ export var propertyGridCss = {
     chevronButtonSvg: "sd-dropdown_chevron-button-svg",
     chevronButtonIconId: "icon-chevron",
   },
+  buttongroup: {
+    root: "spg-button-group",
+    item: "spg-button-group__item",
+    itemIcon: "spg-button-group__item-icon",
+    itemDecorator: "spg-button-group__item-decorator",
+    itemCaption: "spg-button-group__item-caption",
+    itemHover: "spg-button-group__item--hover",
+    itemSelected: "spg-button-group__item--selected",
+    itemDisabled: "spg-button-group__item--disabled",
+    itemControl: "sv-visuallyhidden",
+  },
   imagepicker: {
     root: "spg-imagepicker",
     item: "spg-imagepicker__item",

visualRegressionTests/tests/designer/theme-tab.ts

@@ -79,7 +79,7 @@ test("theme setting property grid", async (t) => {
     await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-header-group.png", expandedGroup, t, comparer);
 
-    await t.click(expandedGroup.find(".sv-button-group__item-caption").withText("Advanced"));
+    await t.click(expandedGroup.find(".spg-button-group__item-caption").withText("Advanced"));
     await takeElementScreenshot("theme-editor-property-grid-header-group-advanced.png", expandedGroup, t, comparer);
 
     await t.click(getPropertyGridCategory("Header"));