diff --git a/functionalTests/property-grid/question.ts b/functionalTests/property-grid/question.ts index 504ee44f4a..334e2e53d0 100644 --- a/functionalTests/property-grid/question.ts +++ b/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(); }); 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 index ecc4f27a54..86c1e4bc07 100644 --- 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,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); } } 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 index 822c6e936c..92170b380a 100644 --- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss +++ b/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 { 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 index e7f3a230c5..80b2276564 100644 --- 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", diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png b/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png index 0020def0f0..46af2ed3fb 100644 Binary files a/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png and b/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png b/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png index 1c77b0d3e5..0445581b4b 100644 Binary files a/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png and b/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png differ diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-general.png b/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-general.png index 48c2e748df..1e92f1bee3 100644 Binary files a/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-general.png and b/visualRegressionTests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-general.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png index 231ca8b18d..d941b7d236 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png index 2fa75816dc..5923a4bad4 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png index 4702d9c704..a0714bd170 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png index bc3fd3c587..27dfd7ba77 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png index 1c48378c1b..ac3f1b396a 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png differ diff --git a/visualRegressionTests/tests/designer/theme-tab.ts b/visualRegressionTests/tests/designer/theme-tab.ts index 26e870af03..d5861d3a69 100644 --- a/visualRegressionTests/tests/designer/theme-tab.ts +++ b/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"));