#5988 Button Group Item new design

Fixes #5988
surveyjs · Oct 25, 2024 · 6864b9b · 6864b9b
1 parent b635457
commit 6864b9b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 51 deletions.
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss
@@ -1,71 +1,86 @@
-.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: 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, 12px) var(--ctr-button-group-item-padding-horizontal, 16px);
+  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: 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-button-group__item--disabled {
+  color: var(--ctr-button-group-item-text-color-disabled, $foreground);
+
+  .spg-button-group__item-icon use {
+    fill: var(--ctr-button-group-item-text-color-disabled, $foreground);
+  }
 
-  .spg-page.spg-body__page {
-    box-shadow: unset;
+  &:hover {
+    background-color: var(--ctr-button-group-item-background-color-disabled, $background);
   }
 }
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
@@ -130,4 +130,14 @@
       fill: $foreground-dim-light;
     }
   }
+}
+
+.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;
+  }
 }
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts b/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",