diff --git a/.changeset/happy-suns-report.md b/.changeset/happy-suns-report.md new file mode 100644 index 00000000000..715787cad39 --- /dev/null +++ b/.changeset/happy-suns-report.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +Prevent empty space if no icon is shown in __category-filter__. diff --git a/packages/core/scss/mixins/_input.scss b/packages/core/scss/mixins/_input.scss index d2c7fd64712..d480fc98a9e 100644 --- a/packages/core/scss/mixins/_input.scss +++ b/packages/core/scss/mixins/_input.scss @@ -9,11 +9,11 @@ @use './fonts'; @use './validation/form-component'; -@mixin element-input($feature-read-only: true) { +@mixin element-input($feature-read-only: true, $padding: 0.25rem 0.5rem) { & { min-height: 2rem; width: auto; - padding: 0.25rem 0.5rem; + padding: $padding; background-color: var(--theme-input--background); color: var(--theme-input--color); appearance: textfield; diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss index f9262b26dac..597e10c5650 100644 --- a/packages/core/src/components/category-filter/category-filter.scss +++ b/packages/core/src/components/category-filter/category-filter.scss @@ -36,8 +36,25 @@ } .input-container { - &:not(.readonly):not(.disabled) { - @include input.element-input('false'); + $padding-with-icon: 1px vars.$large-space 1px 1.75rem; + $padding-no-icon: 1px vars.$large-space 1px vars.$tiny-space; + + &:not(.readonly) { + &:not(.no-icon) { + @include input.element-input(false, $padding-with-icon); + } + &.no-icon { + @include input.element-input(false, $padding-no-icon); + } + } + + &.readonly { + &:not(.no-icon) { + @include input.element-input(true, $padding-with-icon); + } + &.no-icon { + @include input.element-input(true, $padding-no-icon); + } } &:not(.readonly):not(.disabled):hover { @@ -57,18 +74,9 @@ var(--theme-input--border-color-bottom--disabled); } - &.readonly { - @include input.element-input; - } - display: flex; height: auto; max-height: 3.75rem; - padding: 1px vars.$large-space 1px 1.75rem !important; - - &.no-icon { - padding-left: vars.$tiny-space; - } } .token-container { diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-dark-linux.png new file mode 100644 index 00000000000..577d82ffddd Binary files /dev/null and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-light-linux.png new file mode 100644 index 00000000000..75d2d10c84f Binary files /dev/null and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png index ff8d26684fe..41d2e369192 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png index d5ebc5863c3..70711d0449f 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png index 5c0ba28f18c..960b50ad112 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png index a5ec2792435..b66238e9dab 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png index ba3863cabd0..1e09eaafa37 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png index 33c29af179c..7a1c08b96dc 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png index 7ecbb57a6f8..935ca491a0a 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png index c9c3c58a9e5..1949c353621 100644 Binary files a/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/category-filter/category-filter.e2e.ts/category-filter-dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/tests/category-filter/basic-no-icon/index.html b/testing/visual-testing/tests/category-filter/basic-no-icon/index.html new file mode 100644 index 00000000000..bfc1babe1fa --- /dev/null +++ b/testing/visual-testing/tests/category-filter/basic-no-icon/index.html @@ -0,0 +1,38 @@ + + + + +
+ + +