#5988 Button Group Item new design

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/components/toolbox/toolbox-tool.scss

@@ -110,12 +110,12 @@
     border-top-color: transparent;
     border-inline-end-color: transparent;
     box-shadow:
-    var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
-      var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px)
-      var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)),
-    var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
-      var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
-      var(--ctr-tooltip-shadow-2-color, transparent);
+      var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
+        var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px)
+        var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)),
+      var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
+        var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
+        var(--ctr-tooltip-shadow-2-color, transparent);
     align-self: center;
     position: absolute;
     inset-inline-end: 100%;
@@ -124,7 +124,6 @@
     clip-path: polygon(-100% -100%, -100% 200%, 200% 200%);
   }
 
-
   .sv-svg-icon use {
     fill: var(--ctr-toolbox-item-icon-color-hovered, $primary);
   }
@@ -276,6 +275,11 @@
 
 .svc-toolbox-subtypes {
   .sv-popup__container {
+    --toolbox-item-padding-top: calc(1 * #{$base-unit});
+    margin-top: calc(
+      0px - var(--ctr-toolbox-submenu-group-margin-top, 0px) -
+        var(--ctr-toolbox-item-padding-top, var(--toolbox-item-padding-top))
+    );
     padding: 0;
     padding-inline-start: var(--ctr-toolbox-submenu-offset, calcSize(0.5));
     box-shadow: unset;

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"));